HTML DAN CSS DASAR

Arif Maulana Yusuf

Pendahuluan Pemrograman Web Dasar

Apa itu Web?

Web adalah adalah kumpulan halaman yang saling berhubungan dan umumnya di simpan di
dalam sebuah server. Umumnya sebuah website berisikan informasi yang disediakan secara
perorangan, kelompok, atau organisasi. Salah satu contoh web adalah codepolitan.com
dimana disitus ini kita bisa membaca artikel, belajar pemrograman melalui tutorial tertulis,
mengikuti tutorial video di member premium, serta berdiskusi bersama member yang lain.

Manfaat Web Programming

• Bisa mengembangkan cara berfikir yang sistematis.
• Membuat solusi dari suatu masalah dengan menggunakan teknologi. Contoh, banyak
orang kesulitan mencari informasi tentang koding, maka kita bisa mengembangkan web
yang membahas tentang hal itu. Contoh lainnya, UMKM (Usaha Mikro Kecil dan
Menengah) kesulitan menemukan konsumen, maka kita bisa membuat web yang
mempertemukan pelaku usaha dengan konsumennya dari seluruh Indonesia yang mana
telah dilakukan oleh Achmad Zaky dengan Bukalapak-nya. Bisa kah kamu menemukan
sendiri suatu masalah yang terjadi di sekitarmu dan perlu diselesaikan dengan teknologi
web?

Mengapa Belajar Web Programming

Ada banyak hal yang membuat kita harus belajar web programming. Yang pertama, teknologi
web adalah teknologi yang masih terus berkembang hingga saat ini. Alasan kedua, meski
banyak yang mengatakan mobile akan menggantikan web, namun nyatanya web masih dipakai
oleh banyak orang. Bahkan aplikasi mobile sesungguhnya banyak bergantung pada sistem web
sebagai pusat penyimpanan data. Alasan yang terakhir, web programming relatif lebih mudah
untuk dipelajari untuk orang awam yang masih buta dengan pemrograman. Karena tingkat
kesulitan yang lebih rendah, banyak orang yang sebelumnya tidak mengerti programming sama
sekali bisa sukses menjadi seorang web programmer.

1
 Arif Maulana Yusuf

Konsep Client dan Server

Client dan server adalah bagian penting pada web development. Bedasarkan fungsinya,
pemrograman web dibagi menjadi dua yaitu frontend dan backend. Frontend adalah bagian
web yang bisa dilihat secara langsung oleh pengguna. Misalnya, saat kita membuka Facebook
atau Twitter, maka halaman-halaman yang muncul merupakan bagian dari frontend. Saat kita
mendaftar, melakukan login, mengirim pesan, mengunggah gambar, dan aksi dimana kita perlu
mengambil atau menyimpan data, maka aksi-aksi tersebut akan terjadi di backend yang tidak
bisa kita lihat bagaimana aksi-aksi tadi terjadi.
Frontend dan backend sangat erat kaitannya. Jika sebuah web hanya memiliki tampilan atau
frontend saja, maka ia tidak bisa melakukan sesuatu yang dinamis. Kita tidak bisa mencari data
atau menyimpan data di sebuah web yang tidak memiliki backend. Sebaliknya, jika kita hanya
membuat backend-nya saja, pengguna tidak bisa berinteraksi dengan web yang kita buat, yang
menyebabkan web kita tidak ada yang memakai.

Perbedaan Client Side dan Server Side

Untuk client side semua proses terjadi di sisi pengguna, client me-request data ke server
dimana data di kirim ke server. Pada client side yang ditampilkan adalah halaman website yang
berbentuk halaman HTML, CSS, dan JS.
Sedangkan untuk server side semua proses terjadi di sisi server yaitu di komputer server atau di
cloud . Server side bertanggung jawab merespon data yang di request oleh client side. Server
side yaitu tempat dimana database, API, atau server side rendering terjadi, sebagai contoh
bahasa pemrograman PHP berjalan di server dan di tampilkan ke client sebagai file HTML.

Web Server / Hosting

Hosting adalah penyewaan tempat untuk menampung data-data yang dibutuhkan oleh sebuah
website yang bisa berbentuk gambar, email, script, file, atau database. Hosting biasanya
berbayar dengan pilihan paket-paket yang bisa dipilih dari rentang harga belasan ribu hingga
jutaan rupiah tergantung spesifikasi yang dibutuhkan.
Hosting memiliki peran yang sangat penting bagi sebuah web karena hosting lah yang
meMbuat web kita bisa diakses oleh orang lain melalui internet. Jika web yang dibuat hanya
disimpan di komputer/laptop kita saja, maka tidak ada orang lain yang bisa menggunakan web
tersebut.

2
 Arif Maulana Yusuf

Domain
Domain adalah nama unik yang diberikan untuk mengidentifikasi alamat. Contoh (IP address)
server komputer seperti web server atau email server di internet.
Contoh :
• Codepolitan.com
• rosma.ac.id
Jika di analogikan domain adalah alamat rumah sedangkan hosting merupakan
tanahnya/rumahnya.

Konsep Bahasa Pemrograman

Bahasa perograman adalah susunan karakter dan kata kunci yang dapat dikonversi ke dalam
bahasa mesin sehingga dapat dijalankan oleh komputer.
Bahasa pemrograman web adalah bahasa pemrograman yang digunakan untuk membangun
aplikasi berbasis web.

Tipe Bahasa Pemrograman

Ada dua tipe bahasa pemrograman web yaitu :
• Client Side Language
o HTML
o CSS
o JavaScript
• Server Side Language
o PHP
o Java
o Python
o Perl
o Node.JS
o Ruby

3
 Arif Maulana Yusuf

Web Browser
Web browser adalah software yang digunakan untuk menjelajahi internet atau mencari
informasi dari suatu laman website. Web browser merepresentasikan dokumen HTML ke dalam
bentuk visual.
Contoh :
• Google Chrome
• Mozilla Firefox
• Safari
• Opera

Sebelum Membuat Website

Sebelum membuat website kita perlu memetakan tiga hal di bawah ini :
• Apa tujuan dari website tersebut ?
• Siapa saja penggunanya ?
• Target bisnis yang akan dicapai ?

4
 Arif Maulana Yusuf

Dasar HTML

Apa itu HTML ?

Pada tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research
(CERN) mencetuskan ide untuk menciptakan suatu script bahasa pemrograman pada suatu
dokumen yang kemudian dikenal sebagai HTML. Tim Berners Lee diketaui sebagai penemu
HTML. Saat ini penggunaan dan pengembangan HTML diatur oleh World Wide Web Consortium
(W3C) dan versi terakhir dari HTML yang sekarang digunakan adalah HTML5. Versi ini memiliki
fitur yang lebih baik dari versi HTML sebelumnya. HTML adalah kepanjangan dari HyperText
Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web.
HTML itu sendiri bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++,
visual basic dan sejenisnya. HTML mendeskripsikan struktur halaman web yang ditulis dengan
element atau tag yang yang mengapit konten atau teks didalamnya yang akan ditampilkan
pada sebuah halaman web oleh browser. Jadi apapun website yang kita lihat pasti awalnya
dibangun menggunakan HTML.

Apa Kegunaan HTML ?

HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi
struktur dan informasi terkait dengan sebuah halaman web. Konten sebuah web tidak hanya
terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan
animasi dapat disisipkan dan ditampilkan pada halaman web.

Struktur dasar HTML memiliki susunan file seperti berikut ini :

<html>
<head>
<title>Judul halaman</title>
</head>
<body>
<!-- semua yang akan di tampilkan di web disimpan di dalam body -->
<h1>Selamat datang</h1>
</body>
</html>

5
 Arif Maulana Yusuf

Struktur HTML
Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.

Tag HTML
Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen
HTML. Fungsi tag adalah untuk memberikan instruksi atau memberitahu kepada browser
bagaimana suatu objek di tampilkan berdasarkan tag yang di gunakan, objek disini bisa berupa
teks, video, audio dan gambar.

Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Tag
pembuka ditulis seperti ini:

<nama_tag>

dan tag penutup ditulis seperti ini:

</nama_tag>

**Catatan** : Perbedaan antara tag pembuka dan tag penutup adalah tag penutup memiliki
karakter garis miring sebelum nama tagnya.

Elemen HTML
Rangkaian dari tag pembuka, konten dan tag penutup disebut dengan elemen HTML. Contoh
berikut ini adalah elemen heading 1 dan elemen paragraf:

<h1>Selamat Datang</h1>
<p>Selamat belajar pemrograman web.</p>

Pada contoh kode di atas, kita memiliki elemen heading 1 yang tersusun dari tag pembuka <h1>,
konten elemen berupa teks bertuliskan Selamat Datang dan tag penutup </h1>. Kita juga
memiliki elemen paragraf yang tersusun dari tag pembuka <p>, konten teks dan tag
penutup </p>. Perbedaan dari kedua elemen ini adalah, elemen heading digunakan untuk
menampilkan judul halaman, sedangkan elemen paragraf digunakan untuk menampilkan
konten paragraf. Bila kita buka di browser, maka elemen heading akan dicetak lebih besar dan
lebih tebal daripada elemen paragraf.

6
 Arif Maulana Yusuf

Bila kita memiliki contoh kode seperti ini:

<body>
<h1>Selamat datang</h1>
<p>Selamat belajar pemrograman web di <b>CodePolitan</b></p>
</body>

maka:

• <body> disebut tag body (atau tag pembuka body), <h1> adalah tag h1 dan <p> adalah
tag p atau paragraf
• <h1>Selamat datang</h1> disebut elemen h1
• <p>Selamat belajar pemrograman web di <b>CodePolitan</b></p> disebut elemen p
atau paragraf
• <b>CodePolitan</b> disebut elemen b atau bold, <b> itu sendiri disebut tag b atau bold
• semua bagian mulai dari tag pembuka body, berikut subelemen diantara tag pembuka
dan penutup body, hingga tag tutup body disebut dengan elemen body.

Catatan : Penulisan elemen harus Penulisan elemen harus lengkap, mulai dari tag pembuka,
konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!

Ada banyak tag yang dapat kita gunakan di dalam HTML untuk menampilkan konten. Bila kita
bagi ke dalam dua area, maka ada tag-tag yang digunakan di dalam elemen head dan ada tag
yang digunakan di dalam elemen body.

Tag di dalam Elemen Head

Elemen yang ada di dalam head berfungsi sebagai informasi dari dokumen HTML dan tidak akan
ditampilkan di layar browser. Beberapa tag yang dapat digunakan di dalam elemn head
diantaranya adalah <meta>, <title>, <style>, <script> dan <link>.

<head>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
<script> Javascript </script>
</head>

7
 Arif Maulana Yusuf

Tag di dalam Elemen Body

Ada banyak tag yang dapat kita gunakan untuk menampilkan konten di dalam elemen body.
Ada tag yang berfungsi untuk menampilkan teks, seperti <h1>, <h2>, <h3>, <h3>, <h4>, <h5>,
<p> dan sebagainya.

Ada juga tag untuk memformat teks, seperti <b>, <i>, <strong>, <em>, <mark>, <del> dan
sebagainya.

Untuk menampilkan gambar kamu dapat menggunakan tag <img>, dan untuk membuat tautan
kamu dapat menggunakan tag <a>.

Di dalam HTML, kamu dapat membuat elemen table dengan menggunakan kombinasi dari
tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Kamu juga dapat membuat list dengan
menggunakan kombinasi dari tag <ul>, <ol>, <li>, <dl>, <dd>, dan <dt>. Terkait pembuatan
table dan list akan dibahas secara khusus di bagian selanjutnya.

Kamu juga dapat memasukkan video, audio atau format media lainnya menggunakan sejumlah
tag seperti <object>, <video>, <audio>, <embed>, dan <iframe>.

Sampai pembahasan ini kamu cukup perlu paham terkait tag dan elemen. Adapun cara
penggunaan tag-tag di atas akan dibahas di bagian khusus setelah ini. Bila kamu ingin tahu lebih
lengkap tag HTML apa saja yang tersedia dapat dilihat di https://www.w3schools.com/tags/.
Jangan kaget bila kamu menemukan banyak tag di HTML. Kamu tak mesti menghapal
semuanya, cukup pelajari tag-tag yang akan kamu gunakan saat membuat web nantinya.

Attribut HTML
Atribut memiliki tugas khusus untuk memberikan informasi tambahan pada sebuah tag.

<namatag nama-atribut="nilai-atribut"></namatag>

Dari contoh kode di atas yang dimaksud dengan atribut adalah tambahan yang ditulis di dalam
tag pembuka. Contohnya bila kita hendak membuat tautan atau link, kamu akan perlu menulis
minimal seperti ini:

<a href="login.html">Login</a>

Pada contoh kode di atas, kita membuat tautan menggunakan tag <a>. Namun menggunakan
tag <a> saja tidak cukup, karena kita perlu memberi tahu kepada browser kemana halaman

8
 Arif Maulana Yusuf

akan dialihkan bila pengguna mengklik tautan Login. Oleh karena itu, tag <a> dilengkapi dengan
atribut href yang harus diisi dengan nama URL tujuan dari tautan tersebut. Pada contoh di
atas, href adalah nama atribut, dan "login.html" adalah nilai atribut. Nama dan nilai atribut
dipisahkan dengan tanda sama dengan (=).

Selain tag <a> ada banyak tag lain yang memerlukan atribut. Bila dikelompokkan, ada dua jenis
atribut, yakni atribut global dan atribut spesifik. Atribut global adalah atribut yang dapat
diterapkan pada tag apapun karena sifatnya yang umum. Contoh atribut global diantaranya
adalah class, id, lang, title, style dan sebagainya. Sedangkan atribut spesifik adalah atribut yang
hanya berfungsi pada tag-tag tertentu, seperti atribut href yang hanya berlaku pada
tag <a> dan <link>, atribut src yang hanya berlaku pada tag <img> dan <script>, dan
sebagainya. Daftar lebih lengkap atribut HTML dapat dilihat
di https://www.w3schools.com/html/html_attributes.asp

9
 Arif Maulana Yusuf

CSS dan Style HTML Dasar

Apa itu CSS?
CSS singkatan dari Cascading Style Sheeet, yaitu dokumen yang berisi definisi style untuk sebuah
dokumen HTML atau untuk mengatur tampilan dari dokumen HTML, meliputi layout dokumen,
pewarnaan dan tampilan font dan teks dan lain sebagainya. Penulisan CSS baiknya ditulis
terpisah dari konten HTML hal ini dilakukan untuk meningkatkan daya akses konten pada web
dan mengurangi kerumitan dalam penulisan kode dan struktur dari dokumen HTML.

Dengan adanya CSS, konten dan desain web akan mudah dibedakan, sehingga memungkinkan
untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga
akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat
memangkas waktu pembuatan web.

Struktur Penulisan CSS

CSS ditulis dengan format penulisan seperti berikut:

selector { property:value }
selector { property:value; property:value }

Selector adalah bagian CSS yang berfungsi untuk memilih elemen yang akan dikenai
style. Property adalah jenis style yang akan diterapkan pada elemen, dan value adalah nilai dari
property yang digunakan. Property dan value CSS ditulis diantara kurung kurawal. Bila property
CSS yang digunakan lebih dari satu, maka pisahkan dengan titik koma.

Contoh penulisan CSS:

<style>
h1 {
font-size: 40px;
color: orange;
}
</style>

<h1>Teks Judul</h1>

10
 Arif Maulana Yusuf

Pada contoh di atas, kita menulis h1 sebagai selector yang artinya kita ingin agar
elemen <h1> pada HTML dikenai style. Property yang diterapkan adalah font-size untuk
mengatur ukuran font, diset dengan nilai 40px, dan property color untuk mengatur warna teks,
diset dengan nilai orange.

Teknik Penerapan CSS

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu external, internal dan inline.

Inline Style Sheet

Pada teknik ini kita menulis kode CSS di dalam tag HTML, tepatnya di dalam atribut style.

<h1 style="font-size:40px; color:orange;">

Teks Judul
</h1>

Teknik ini akan menerapkan style hanya pada elemen yang dikenai style tersebut.

Internal Style Sheet

Teknik internal stylesheet adalah menuliskan kode CSS di dalam file dokumen HTML tapi
dikumpulkan di dalam elemen <style>.

<style>
h1 {
font-size: 40px;
color: orange;
}
</style>

<h1>Teks Judul</h1>

Teknik ini akan memberlakukan CSS hanya pada dokumen HTML dimana ia disimpan.

11
 Arif Maulana Yusuf

External Style Sheet

Teknik eksternal stylesheet adalah menuliskan kode untuk style CSS di file terpisah dengan kode
HTML.

Style di definisikan di dalam file, misalkan style.css:

/* style.css */
h1 {
font-size: 40px;
color: orange;
}

kemudian style.css ditautkan didalam dokumen HTML menggunakan tag <link>:

<!-- index.html-->
<link href="style.css" rel="stylesheet" type="text/css" />
<h1>Teks Judul</h1>

Maka semua style yang ada di dalam style.css akan diterapkan ke dalam dokumen HTML.
Keuntungan dari teknik ini adalah, CSS dapat diterapkan ke banyak dokumen HTML sehingga
penulisan CSS menjadi lebih efisien.

CSS Properties
Property digunakan untuk memilih jenis style apa yang akan diterapkan pada tag, class, atau id
yang telah dipilih pada selector, dan pada satu selector bisa berisi beberapa property. Pada CSS
terdapat banyak sekali property yang dapat digunakan untuk menghias webisite

Jenis propery CSS diantaranya adalah

1. background
2. border
3. box model
4. layouting
5. font & text, dll.

12
 Arif Maulana Yusuf

Karena ada begitu banyak property CSS, maka kita tidak perlu menghafal semuanya, cukup
pahami apa fungsi dari property yang akan digunakan. Referensi property CSS lebih lengkap
bisa dilihat di https://www.w3schools.com/cssref/

Selector
Pada CSS terdapat selector yang digunakan untuk memilih elemen HTML yang akan dikenai
style. Pemilihan elemen menggunakan nama tag, nilai atribut, atau pola tertentu.

Berikut adalah contoh penulisan selector

h1 { color:red }

Cara membaca selector diatas adalah "Pilih elemen h1 pada document, lalu set property colornya
menjadi red"

Terdapat dua macam tag selector yaitu single selector dan multiple selector (menargetkan tag
yang berbeda dengan style yang sama), bisa kita lihat pada contoh dibawah ini:

Contoh single selector

h1 { color:red }
p { font-size:16px }

Contoh multiple selector (menargetkan tag yang berbeda dengan style yang sama)

h1,h2,h3,p {
font-family: "arial", sans-sarif;
color: #666;
}

Selector dengan id dan class

Selector class digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id
hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman. Selector
ini ditulis dengan awalan titik atau dot “.” pada CSS dan class=“nama-class” pada HTML.

13
 Arif Maulana Yusuf

Sedangkan selector id hanya boleh dipanggil satu kali, selain itu untuk Selector ini ditulis dengan
awalan pagar “#” pada CSS dan id=“nama-id” pada HTML.

Berikut contoh implementasi selector id dan class

<style>
#higlight {background-color:yellow}
.red{color:red}
</style>

<h1>Penggunaan Selector Class dan Id</h1>

<p class="red">Ini selector class</p>
<p id="higlight">Ini selector id</p>

14
 Arif Maulana Yusuf

Membuat Tabel

Bagaimana cara membuat table ?

Untuk menampilkan data yang terstruktur memiliki banyak cara, mulai dari menggunakan
grafik,sampai dengan menggunakan tabel, namun pada pembahasan ini kita akan sedikit
mengulas tentang menampilkan data menggunakan tabel.

Sebuah tabel terdiri dari dua elemen utama, yaitu baris dan kolom. HTML sudah menyediakan
beberapa elemen untuk membuat sebuah tabel, yaitu <table>, <tr>, <td>. Sebelum membuat
baris dan kolom maka kita harus inisialisasi tabel terlebih dahulu menggunakan elemen <table>.

<table>
<!-- Data -->
</table>

Selanjutnya, kita menambahkan baris ke dalam tabel tersebut dengan menggunakan

elemen <tr>.

<table>
<tr>
<!-- Isi baris tabel -->
</tr>
<tr>
<!-- Isi baris tabel -->
</tr>

</table>

Kemudian setiap baris dari tabel tentunya harus diisikan dengan data yang akan menghasilkan
kolom tabel. untuk mengisi data pada kolom tabel pada html menggunakan
elemen <td>.Tetapi, jika ingin membuat baris pertama pada tabel sebagai header, kita dapat
mengisikan baris pertama dengan elemen <th>.

15
 Arif Maulana Yusuf

Dapat kita lihat hasil akhir dari tabel yang kita buat sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Dasar Html</title>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Roy</td>
<td>Bandung</td>
</tr>
<tr>
<td>2</td>
<td>Si Boy</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Roni</td>
<td>Surabaya</td>
</tr>
</table>
</body>
</html>

Bila kita buka halaman html tersebut di browser, maka akan muncul seperti ini:

16
 Arif Maulana Yusuf

Dapat kita lihat dari gambar diatas, tidak terlihat seperti tabel ya, kita perlu
menambahkan border="1" pada elemen tabel tersebut.

<!DOCTYPE html>
<html>
<head>
<title>Dasar Html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Roy</td>
<td>Bandung</td>
</tr>
<tr>
<td>2</td>
<td>Si Boy</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Roni</td>
<td>Surabaya</td>
</tr>

17
 Arif Maulana Yusuf

</table>
</body>
</html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan muncul seperti ini:

Seperti itu kira-kira bentuk table pada HTML. Sekarang kita lanjut pada fungsi penggabungan
baris dan kolom. Pada HTML terdapat perintah colspan dan rowspan. Colspan adalah perintah
untuk menggabungkan beberapa kolom menjadi satu. Contohnya kalian bisa rubah htmlnya
menjadi seperti ini.

<!DOCTYPE html>
<html>
<head>
<title>Dasar Html</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">No</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Roy</td>
<td>Bandung</td>
</tr>
<tr>
<td>2</td>
<td>Si Boy</td>

18
 Arif Maulana Yusuf

<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Roni</td>
<td>Surabaya</td>
</tr>
</table>
</body>
</html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:

Lalu ada rowspan yang berfungsi untuk menggabungkan beberapa baris menjadi satu.
Contohnya seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Dasar Html</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>

19
 Arif Maulana Yusuf

<td>Roy</td>
<td rowspan="3">Bandung</td>
</tr>
<tr>
<td>2</td>
<td>Si Boy</td>
</tr>
<tr>
<td>3</td>
<td>Roni</td>
</tr>
</table>
</body>
</html>

Bila kita buka halaman html tersebut di browser, maka hasilnya akan menjadi seperti ini:

Selain itu kita juga dapat menambahkan atribut border dan yang lainya kedalam tag <style>,
coba kita lihat contoh dibawah ini :

<!DOCTYPE html>
<style>
table,
th,
td{
border: 1px solid red;
}

table{
border-collapse: collapse;

20
 Arif Maulana Yusuf

width: 100%;
}

th{
height: 50px;
}

th,
td{
padding: 15px;
text-align: left;
}

</style>
<html>
<head>
<title>Dasar Html</title>
</head>
<body>
<table>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Roy</td>
<td rowspan="3">Bandung</td>
</tr>
<tr>
<td>2</td>
<td>Si Boy</td>
</tr>
<tr>
<td>3</td>

21
 Arif Maulana Yusuf

<td>Roni</td>
</tr>
</table>
</body>
</html>

22
 Arif Maulana Yusuf

Membuat List

Membuat List dengan HTML

List/daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya terdiri dari poin-
poin tersendiri. Sebagai contoh pada tutorial pembuatan makanan dimana terdapat tahapan-
tahapan yang perlu dituliskan secara terurut. Dalam pembuatan list dibagi menjadi 2
yaitu ordered list dan unordered list. Ordered list atau daftar terurut memberikan fasilitas untuk
membuat daftar data secara terurut, sedangkan unordered list digunakan untuk menampilkan
daftar data yang tidak memiliki urutan tertentu, atau yang tidak mementingkan urutan.

Untuk pembuatan ordered list kita menggunakan elemen <ol>(ordered list) dan isi dari list
sendiri dibuat dengan menggunakan elemen <li> (list item), sedangkan untuk membuat
ordered list menggunakan elemen <ul> (unordered list), dan untuk mengisikan daftar, kita
dapat menggunakan elemen <li> (list item).

Berikut contoh penggunaan ordered list dengan tag <ol>

<ol>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
</ol>

Berikut contoh penggunaan unordered list dengan tag <ul>

<ul>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
<li>Ini adalah contoh daftar unordered list</li>
</ul>

Berikut ini contoh implementasi dan output membuat ordered list dan unordered list

23
 Arif Maulana Yusuf

<ol>
Ordered List
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
</ol>

<ul>
Unordered List
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
<li>Ini adalah contoh daftar ordered list</li>
</ul>

24
 Arif Maulana Yusuf

Membuat Layout

Membuat Layout dengan Table

Untuk membuat layout sederhana, kita dapat menggunakan tag <table>.

Tabel disusun dari kolom dan baris, kita dapat memanfaatkan kolom dan baris tersebut menjadi
sebuah layout.

<table width="100%">
<tr>
<td colspan="2" style="background:red">
<h1>Header</h1>
</td>
</tr>
<tr valign="top">
<td width="50" style="background:green">
<strong>Sidebar</strong>
</td>
<td width="100" height="550"style="background:purple">
<strong>Halaman Konten</strong>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
</tr>
<tr>
<td colspan="2" style="background:blue">

25
 Arif Maulana Yusuf

<h1>Footer</h1>
</td>
</tr>
</table>

colspan digunakan untuk menggabungkan kolom .

width digunakan untuk mengatur lebar kolom. kita bisa mengisinya dalam bentuk px maupun
%.

height digunakan untuk mengatur tinggi kolom. kita bisa mengisinya dalam bentuk px maupun
%.

Setelah membuat kerangka layout sederhana, kita dapat mengembangkan layout tersebut
seperti menambahkan navigasi pada kolom sidebar.

<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="forum.html">Forum</a></li>
</ul>

26
 Arif Maulana Yusuf

Saat ini membuat layout dengan table mulai ditinggalkan.

Membuat layout dengan table tidak direkomendasikan karena akan menyulitkan kita dalam
mendesain ulang di kemudian hari.

Membuat Layout dengan tag <div>

Untuk membuat layout dengan tag <div>, kita membutuhkan style css.

Membuat kerangka / struktur Layout

<div id="header">
Header
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content

27
 Arif Maulana Yusuf

</div>
<div id="footer">
Footer
</div>

Pada baris kode di atas, akan menghasilkan output seperti di bawah ini, belum terlihat seperti
sebuah layout.

Untuk membuatnya menjadi sebuah layout, kita harus menambahkan style css berdasarkan id
yang dipanggil oleh masing-masing <div>

Menambah Style CSS

<style>
#header
{
background : #00ccff;
height : 10%;
font-size : 1.5em;
text-align :center;
padding-top : 20px;
}
#sidebar
{
background : #99ccff;
float : left;
height : 400px;
width :30%;
font-size : 1.5em;
text-align :center;
padding-top : 20px;

28
 Arif Maulana Yusuf

}
#content
{
background : #9999ff;
float : right;
width : 70%;
height : 400px;
font-size : 1.5em;
text-align :center;
padding-top : 20px;
}
#footer
{
background : #3399ff;
clear : both;
font-size : 1.5em;
text-align :center;
}
</style>

Mengaitkan struktur layout html dengan style css

<style>
#header
{
background : #00ccff;
height : 10%;
font-size : 1.5em;
text-align :center;
padding-top : 20px;
}
#sidebar
{
background : #99ccff;
float : left;

29
 Arif Maulana Yusuf

height : 400px;
width :30%;
font-size : 1.5em;
text-align :center;
padding-top : 20px;

}
#content
{
background : #9999ff;
float : right;
width : 70%;
height : 400px;
font-size : 1.5em;
text-align :center;
padding-top : 20px;
}
#footer
{
background : #3399ff;
clear : both;
font-size : 1.5em;
text-align :center;
}
</style>
<div id="header">
Header
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer

30
 Arif Maulana Yusuf

</div>

Nah jika kode diatas dijalankan maka akan menghasiilkan layout seperti gambar dibawah ini :

31
 Arif Maulana Yusuf

Display & Dimension

Tag <div> dan <span>

Pada tag <div> dan <span> tidak ada fungsi khusus seperti <h1> , <p>, <img> dan tag semantik
lainnya.

Tag <div> dan <span> digunakan untuk mengelompokkan elemen html atau memberi style
secara spesifik.

Default Display Mode

Tag <div> bersifat block.

div
{
display : block;
}

Tag <span> bersifat inline.

div
{
display : inline;
}

Opsi nilai display

block

• membuat baris baru saat dirender

• dapat diset lebar dan tingginya
• bila lebar tidak diset, maka lebar elemen akan memenuhi lebar dari parentnya.
• di dalamnya dapat disimpan elemen bertipe block, inline dan inline block.

Contoh yang memiliki nilai block : <h1>-<h6> , <p> , <ul>, <ol> , <li>, <form>, <hr> ...

32
 Arif Maulana Yusuf

<style>
h1,p {background:orange};
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di Codepolitan</p>

Ketika kita tidak menentukan lebarnya, maka lebarnya akan memenuhi elemen parent.

<style>
h1,p {background:orange;width:200px;height:75px;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di Codepolitan</p>

Namun ketika diset lebar dan tingginya, maka lebarnya sesuai dengan yang sudah diset.

inline

• tidak membuat baris baru saat dirender

• lebar dan tinggi sebesar konten yang ada di dalamnya
• lebar dan tingginya tidak dapat diatur
• margin dan padding hanya mempengaruhi elemen secra horizontal, tidak vertikal

elemen inline : <b>, <i>, <em>, <strong>, <a>, <span>, <sub>, <sup>, <mark>, <button>, <input>,
<label>, <select>, <textarea>

33
 Arif Maulana Yusuf

<style>
span {background:orange;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Codepolitan</span></p>

Ketika kita tambahkan witdh dan height pada kelas span, maka tidak berpengaruh pada
outputnya.

<style>
span {background:orange;width:100px;height:50px;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Codepolitan</span></p>

inline-block

• tidak ada elemen html yang default bertipe inline-block

• nilai property display dapat diset manual menjadi inline-block
• sifat dasar sama dengan inline
• inline-block akan berpengaruh dari property width dan height

<style>
span {background:orange;width:100px;height:50px;display:inline-block;}
</style>

34
 Arif Maulana Yusuf

<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Codepolitan</span></p>

none

Digunakan untuk menyembunyikan elemen dari layar browser.

<style>
span {background:orange;width:100px;height:50px;display:none;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Codepolitan</span></p>

Tulisan codepolitan tersebut disembunyikan.

Opsi Nilai Width dan Height

Opsi nilai widht dan height diantaranya : px, %, in, cm, dan lainnya.

35
 Arif Maulana Yusuf

Property Dimensi
property Keterangan

width mengatur lebar elemen

height mengatur tinggi elemen

min-width mengatur lebar minimum elemen

min-height mengatur tinggi minimum elemen

max-width mengatur lebar maksimum elemen

max-height mengatur tinggi maksimum elemen

36
 Arif Maulana Yusuf

Box Model & Overflow

Pengertian Box Model

Setiap elemen di halaman HTML direpresentasikan sebagai sebuah kotak.

Kita bisa mengatur ukuran maupun posisi kotak tersebut.

Kita juga dapat memberi warna / gambar latar untuk kotak tersebut.

Pada contoh di atas, layout diberikan border 1px.

37
 Arif Maulana Yusuf

Komponen Box Model

margin

Jarak spasi antara satu elemen dengan elemen lain atau elemen parentnya.

Margin bersifat transparan.

border

Batas garis yang mengelilingi padding dan content.

padding

Jarak spasi antara border dan content.

Padding bersifat transparan.

content

Isi dari elemen, bisa berupa text atau elemen lain. Text, gambar atau elemn lainnya ditampilkan
di bagian ini.

Property margin, padding dan border

margin

margin-top, margin-right, margin-bottom, margin-left, margin.

38
 Arif Maulana Yusuf

padding

padding-top, padding-right, padding-bottom,padding-left, padding.

border

border-top, border-right, border-bottom, border-left, border.

Margin
Nilai property

px, %, auto.

Note : margin boleh memiliki nilai negatif.

<style>
p
{
background: orange;
width : 160px;
height : 160px;
margin: 20px auto;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

Nilai auto akan menempatkan suatu elemen berada di tengah parent.

39
 Arif Maulana Yusuf

<style>
p
{
background: orange;
width : 160px;
height : 160px;
margin: 20px 50px 30px 25px;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

margin: 20px 50px 30px 25px;

• top margin diset 20px

• right margin diset 50px
• bottom margin diset 30px
• left margin diset 25px

Padding
Nilai property

px, %.

Note : padding tidak boleh bernilai negatif.

40
 Arif Maulana Yusuf

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 20px 50px 30px 25px;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

? padding: 20px 50px 30px 100px;

• top padding diset 20px

• right padding diset 50px
• bottom padding diset 30px
• left padding diset 100px

Border

border : width style color;

width : ukuran ketebalan border

style : bentuk garis

color : warna dari border

41
 Arif Maulana Yusuf

border : 2px solid red;

Border Style

Dotted : garis dengan kombinasi bulat-bulat

Dashed : garis dengan kombinasi garis putus-putus

Solid : garis lurus

Box Sizing
content-box

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

Apabila menggunakan content-box , maka lebar box akan dijumlahkan dengan padding.

Misal lebar konten 160px dengan padding left 40px dan padding right 40px, maka total lebar
box tersebut menjadi 240px.

42
 Arif Maulana Yusuf

border-box

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
box-sizing:border-box;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

Pada border-box ukuran sudah ditentukan 160px, tidak akan dijumlahkan dengan padding yang
Kita tentukan.

43
 Arif Maulana Yusuf

Overflow
visible

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
box-sizing:border-box;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan.</p>

auto

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
box-sizing:border-box;
overflow:auto;
}
</style>

44
 Arif Maulana Yusuf

<p>Welcome to my homepage. Here you can read about codepolitan. Welcome to my

homepage. Here you can read about codepolitan.</p>

Pada overflow auto akan ditambahkan scroll apabila konten yang ada melebihi box yang
disediakan, namun bila konten yang ada tidak melebihi box, maka tidak ditambahkan scroll.

scroll

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
box-sizing:border-box;
overflow:scroll;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan. Welcome to my
homepage. Here you can read about codepolitan.</p>

45
 Arif Maulana Yusuf

Pada overflow scroll, setiap box akan ditambahkan scroll tidak memandang apakah konten
yang ada sedikit ataupun banyak.

hidden

<style>
p
{
background: orange;
width : 160px;
height : 160px;
padding: 40px;
box-sizing:border-box;
overflow:hidden;
}
</style>
<p>Welcome to my homepage. Here you can read about codepolitan. Welcome to my
homepage. Here you can read about codepolitan.</p>

Pada overflow hidden, apabila konten yang ada banyak dan melebihi box, maka konten sisanya
tidak akan ditampilkan.

46
 Arif Maulana Yusuf

CSS Float

CSS Float
CSS Float digunakan untuk memposisikan elemen dalam sebuat layout halaman website.
Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya.
Beberapa value yang digunakan untuk property float yaitu : left, right, none. Secara default float
memiliki nilai none.

float: none menentukan bahwa sebuah elemen tidak boleh mengapung (float).

float: none;
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<img src="codepolitan.jpg">
<p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi.
CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan
pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan
disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para
developer Indonesia.

</p>

</body>
</html>

Bila kita lihat pada kode diatas float tidak di inisialisasi valuenya maka
secara default bernilai none, sehingga tampilannya akan seperti di bawah ini

47
 Arif Maulana Yusuf

float: left digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float)
disebelah kiri dari elemen blok yang menampugnya .

float: left;
<!DOCTYPE html>
<html>
<style>
img{
float: left;
padding-right: 10px;
}
</style>
<head>
<title>CSS Float</title>
</head>
<body>
<img src="codepolitan.jpg">
<p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi.
CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan
pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan

48
 Arif Maulana Yusuf

disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para
developer Indonesia.

</p>

</body>
</html>

Bila kita lihat pada kode diatas kita meletakan float: left pada elemen gambar sehingga secara
otomatis gambar akan diletakan disamping kiri dan text akan menjorok mengikuti elemen
gambar.

float: right digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float)
disebelah kanan dari elemen blok yang menampugnya .

float: right;
<!DOCTYPE html>
<html>
<style>
img{
float: right;
padding-right: 10px;

49
 Arif Maulana Yusuf

}
</style>
<head>
<title>CSS Float</title>
</head>
<body>
<img src="codepolitan.jpg">
<p>CodePolitan adalah media edukasi dan informasi tentang pemrograman dan teknologi.
CodePolitan dibangun untuk memfasilitasi para developer dalam mendapatkan informasi dan
pengetahuan seputar pemrograman dan teknologi. Konten-konten yang ada di CodePolitan
disusun sedemikian rupa dan dalam bahasa Indonesia agar mudah dipahami oleh para
developer Indonesia.

</p>

</body>
</html>

Bila kita lihat pada kode diatas kita meletakan float: right pada elemen gambar sehingga secara
otomatis gambar akan diletakan disamping kanan.

Contoh lain pada implementasi float dapat dilihat di

[https://www.w3schools.com/cssref/pr_class_float.asp]

50
 Arif Maulana Yusuf

CSS Position
CSS Position
Seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan
fixed. Secara default, tag-tag yang kita buat itu sudah memiliki nilai position:static. Berikut kita
bahas lebih jauh dari keempat css position tersebut :

Static

position: static;

1. Static adalah nilai default dari tiap-tiap elemen ketika tidak diberi properti position
2. Menggunakan position selain static (non-static),akan membuat sebuah elemen menjadi
seolah olah berbeda dimensi dari elemen lainnya.
3. Elemen yang diberi position selain static dapat menggunakan properti top, left, bottom
dan right untuk mengatur posisinya .

51
 Arif Maulana Yusuf

Relative

position: relative;

1. Ketika kita menggerakan elemen dengan posisi relative (menggunakan properti top,
left. bottom dan right), ruang yang ditempati elemen tersebut masih ada
2. Ketika kita menggerakan elemen dengan posisi relative, elemen akan bergerak relatif
terhadap posisi semula-nya
3. Jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya.

Absolute

position: absolute;

1. Ketika kita menggerakan elemen dengan posisi absolute (menggunakan properti top,
left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada.
2. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif
terhadap posisi dan elemen parent-nya, selama elemen parent-nya memiliki posisi yang
juga non-static.
3. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas
dari elemen-nya

52
 Arif Maulana Yusuf

Jika Absolute tidak memiliki parent relative maka posisinya akan seperti berikut ini :

Tetapi jika Absolute memiliki parent relative maka absolute akan menempel pada parent
relative seperti dibawah ini :

53
 Arif Maulana Yusuf

Fixed

position: fixed;

1. Ketika kita menggerakan elemen dengan posisi fixed (menggunakan properti top, left,
bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada
2. Ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif
terhadap window (browser), meskipun elemen parent-nya bernilai non-static
3. Jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas
dari elemen parent-nya
4. Elemen akan 'terkunci' dan tidak bergerak dari posisinya meskipun halaman di-scroll

54
 Arif Maulana Yusuf

CSS Background
Apa CSS Background itu ?
Properties background dalam css digunakan untuk mendefinisikan efek background dalam
suatu elemen, Terdapat beberapa properties background yang dapat digunakan dalam CSS,
antara lain :

background-color properti background-color ini adalah untuk menentukan warna background

dari sebuah element. Berikut contoh penggunaanya:

body
{
background-color: #b0c4de;
}

Di dalam CSS, warna ditentukan oleh :

• HEX value – seperti “#ff0000”

• RGB value – seperti “rgb(255,0,0)”
• Nama Warna – seperti “red”

background-image properti background-image ini adalah untuk menentukan background

berupa gambar. Contoh penggunaanya :

body
{
background-image: url(image.jpg);
}

background-repeat secara default, properti background-repeat mengulang gambar secara

horizontal dan vertikal. Gambar dapat diulang dengan menggunakan repeat-x atau repeat-y.

body
{
background-image: url(image.jpg);
background-repeat: repeat-y;
}

55
 Arif Maulana Yusuf

background-position kita dapat menentukan posisi background, value yang dapat digunakan
antara lain: left top, left center, left bottom, right top, right center, right bottom, center top,
center center, center bottom.

Contoh penggunaannya yaitu seperti dibawah ini :

body {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center;
}

56
 Arif Maulana Yusuf

CSS Text
Font Styling
color
Digunakan untuk memberi warna pada tulisan.

Warna dapat dispesifikasikan dengan :

• nama warna seperti red, blue, green dan lainnya.

• kode HEX seperti #fff000, #000000, #ffffff dan lainnya.
• RGB seperti rgb(255,0,0), rgb(32,178,170) dan lainnya.

body
{
color: blue;
}

h1
{
color: green;
}
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>Mengubah warna text pada css</p>
</body>
</html>

57
 Arif Maulana Yusuf

text-align
Digunakan untuk mengatur format paragraf / teks secara horizontal.

Paragraf/teks dapat diatur rata kanan, rata kiri, tengah dan juga justify.

<style>
.center
{
text-align: center;
}
.justify
{
text-align: justify;
}
.left
{
text-align: left;
}
.right
{
text-align: right;
}
</style>
<h1 class="center">center</h1>
<h1 class="justify">justify</h1>
<h1 class="left">left</h1>
<h1 class="right">right</h1>

58
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
.rata-kiri {
text-align: left;
}
.rata-kanan {
text-align: right;
}
.rata-tengah {
text-align: center;
}
.sama-rata {
text-align: justify;
}
</style>
</head>
<body>
<strong>Rata Kiri</strong>
<p class="rata-kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Rata Kanan</strong>

59
 Arif Maulana Yusuf

<p class="rata-kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Rata Tengah</strong>
<p class="rata-tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Sama Rata</strong>
<p class="sama-rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

text-indent
Memberi indentasi pada paragraf / teks.

Satuan untuk text-indent adalah px dan %.

<style>
p
{
text-indent: 50px;
}
</style>
<p>Selamat Datang di website Codepolitan. Mari belajar bersama Codepolitan.Selamat Datang
di website Codepolitan. Mari belajar bersama Codepolitan.Selamat Datang di website
Codepolitan. Mari belajar bersama Codepolitan.
</p>

60
 Arif Maulana Yusuf

text-decoration
Mengatur dekorasi pada teks. Kita dapat memberikan dekorasi berupa garis bawah, garis atas
atau garis di tengah-tengah teks (seperti tulisan yang dicoret).

<style>
.overline
{
text-decoration: overline;
}
.through
{
text-decoration: line-through;
}
.underline
{
text-decoration: underline;
}
.none
{
text-decoration: none;
}
</style>
<h1 class="overline">overline</h1>
<h1 class="through">line-through</h1>
<h1 class="underline">underline</h1>
<h1 class="none">none</h1>

61
 Arif Maulana Yusuf

text-transform
Mengubah jenis huruf menjadi huruf besar, kecil / kapital.

uppercase digunakan untuk mengubah teks menjadi huruf besar semua.

lowercase digunakan untuk mengubah teks menjadi huruf kecil semua.

capitalize digunakan untuk mengubah huruf pertama pada teks menjadi huruf besar.

<style>
h1.uppercase
{
text-transform: uppercase;
}
h1.lowercase
{
text-transform: lowercase;
}
h1.capitalize
{
text-transform: capitalize;
}
h1.none
{

62
 Arif Maulana Yusuf

text-transform: none;
}
</style>
<h1 class="uppercase">uppercase</h1>
<h1 class="lowercase">lowercase</h1>
<h1 class="capitalize">capitalize</h1>
<h1 class="none">none</h1>

letter-spacing
Mengatur spasi antar huruf.

<style>
h1
{
letter-spacing: 2px;
}
h2
{
letter-spacing: -2px;
}
</style>
<h1>Spasi 2px</h1>
<h2>Spasi -2px</h2>

63
 Arif Maulana Yusuf

word-spacing
Mengatur spasi antar kata.

<style>
.spasi1
{
word-spacing: 10px;
}
.spasi2
{
word-spacing: -5px;
}
</style>
<h1 class="spasi1">Ini adalah Spasi 10px</h1>
<h1 class="spasi2">Ini adalah Spasi -5px</h1>

64
 Arif Maulana Yusuf

CSS Font
font-family
Font-family digunakan untuk mengatur jenis font yang akan digunakan. Property dari font-
family mengharuskan kita untuk memilih beberapa nama font sebagai sistem fallback, yaitu Jika
browser tidak mendukung font pertama, maka akan memilih font berikutnya dan seterusnya.

Pada CSS, nilai dari font-family dikelompokkan menjadi dua bagian:

• Generic family - adalah jenis font standar yang dipersiapkan sebagai pengganti jika font-
family yang kita pilih tidak tersedia/terinstal dalam sistem komputer kita. (seperti "Serif"
atau "Monospace")
• Family name / Nama font - Family Name adalah kelompok font yang memilki jenis serupa
seperti Trebuchet MS Normal, Trebuchet MS Bold, dan Trebuchet MS Italic (seperti
"Times New Roman" atau "Arial").

Jika kita menetapkan Family Name, maka sebaiknya kita juga menambahkan Generic Family di
akhir penulisan properti font-family mengingat adanya kemungkinan jenis font yang kita pilih
tidak tersedia dalam komputer kita. Oleh karena itu, jika font tersebut benar-benar tidak
ditemukan, maka browser akan menggunakan standar font-nya masing-masing yaitu Generic
Family.

Contohnya seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<style>

65
 Arif Maulana Yusuf

.serif
{
font-family: "Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: Courier New, Lucida Console, Monospace;
}
</style>
</head>
<body>
<h2 class="serif">Serif</h2>
<h2 class="sansserif">Sans-serif</h2>
<h3 class="monospace">Monospace</h3>
</body>
</html>

font-size
Digunakan untuk mengatur ukuran font.

Kita dapat menentukan ukuran font dengan px, % atau em.

Font size dengan px

66
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-size: 40px;
}
h2 {
font-size: 30px;
}
p
{
font-size: 14px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph.</p>
</body>
</html>

font-size dengan em

67
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
font-size: 2.5em; /* 40px/16=2.5em */
}
h2
{
font-size: 1.875em; /* 30px/16=1.875em */
}

p
{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph.</p>
</body>
</html>

68
 Arif Maulana Yusuf

font-weight
Digunakan untuk mengatur ketebalan font.

Property font-weight antara lain : lighter, normal, 100 sd/900, bold dan bolder.

<!DOCTYPE html>
<html>
<head>
<style>
.normal
{
font-weight: normal;
}

.light
{
font-weight: lighter;
}

.thick
{
font-weight: bold;
}

.thicker
{
font-weight: 900;
}
.bolder
{
font-weight: bolder;
}
</style>
</head>
<body>

69
 Arif Maulana Yusuf

<h1 class="normal">Normal</h1>
<h1 class="light">Light</h1>
<h1 class="thick">Thick</h1>
<h1 class="thicker">Thicker</h1>
<h1 class="bolder">Bolder</h1>
</body>
</html>

font-variant
Digunakan untuk mengubah font menjadi small-caps.

<!DOCTYPE html>
<html>
<head>
<style>
.normal
{
font-variant: normal;
}
.small
{

70
 Arif Maulana Yusuf

font-variant: small-caps;
}
</style>
</head>
<body>
<h1 class="normal">Normal</h1>
<h1 class="small">Small-Caps</h1>
</body>
</html>

font-style
Digunakan untuk mengubah font menjadi bercetak miring.

Kita dapat menggunakan property normal, italic dan oblique pada font-style.

<!DOCTYPE html>
<html>
<head>
<style>
.a
{
font-style: normal;
}
.b
{
font-style: italic;
}

71
 Arif Maulana Yusuf

.c
{
font-style: oblique;
}
</style>
</head>
<body>
<h1 class="a">Normal.</h1>
<h1 class="b">Italic.</h1>
<h1 class="c">Oblique.</h1>
</body>
</html>

line-height
Digunakan untuk mengatur spasi antar baris.

Property yang dapat kita gunakan paDa line-height antara lain normal, px, em.

CSS Shorthand
Dari bermacam CSS font di atas, kita dapat menggabungkannya seperti di bawah ini :

72
 Arif Maulana Yusuf

Berikut untuk peraturan penulisannya

73
 Arif Maulana Yusuf

CSS Selector

CSS Selector
Sebelumnya sudah dibahas tentang css selector pada materi css dan style html dasar , tapi pada
materi ini kita akan coba bahas lebih mendalam lagi .

Pada css terdapat selector yang digunakan untuk memilih elemen HTML yang akan dikenai style
, pemilihan elemen menggunakan nama tag, nilai atribut, atau pola tertentu.

Jenis selector
nama tag

id

class

atribut

complex selector

Selector dengan nama Tag

Semisal kita ingin mewarnai body maka langsung saja ketikan selector body, begitupun dengan
h1 , p atau yang lainnya.

Koma pada selector

Koma pada selector berfungsi untuk memilih elemen lebih dari satu ,

h1,h2,h3,p
{
font-family : "arial", sans-sarif;
color:#666;
}

74
 Arif Maulana Yusuf

Jika dilihat pada potongan kode diatas selecteor h1, h2, h3, p berarti elemen tersebut di set
dengan style yang sama.

Spasi pada selector

<style>
body
{
background-color : #fff2cc;
}
p span
{
background-color: #7CFC00;
padding: 4px 3px;
}
</style>
<body>
<h1>Ini elemen judul</h1>
<p>Ini elemen paragraf dengan <span>highlight</span> pada kata tertentu.</p>
</body>

Jika kita lihat pada kode diatas jika kita menambahkan spasi pada selektor maka style span akan
terpengaruh jika elemen tersebut ada didalam tag <p>.

Selector dengan id dan class

Selector class digunakan untuk menentukan style juga sama seperti id. Bedanya adalah
jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman.
Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada
HTML. Sedangkan selector id hanya boleh dipanggil satu kali, selain itu untuk Selector ini ditulis
dengan awalan pagar “#” pada css dan id=“nama-id” pada HTML.

Berikut contoh implementasi selector id dan class.

75
 Arif Maulana Yusuf

<style>
#higlight {background-color:yellow}
.red{color:red}
</style>
<body>
<h1>Penggunaan Selector Class dan Id</h1>
<p class="red">Ini selector class</p>
<p id="higlight">Ini selector id</p>
</body>

Selector spesifik

<style>
body{
background-color: #fff2c;
text-align:center;
}
p{
font-size: 20px;
}
p.small{
font-size: 16px;
}
</style>
<body>
<h1 class="small">Judul ini tidak terpengaruh class small</h1>
<p>Ini elemen paragraf dengan ukuran normal 16px.</p>
<p class="small">Ini paragraf dengan ukuran lebih kecil </p>
<p class="small">Ini paragraf dengan ukuran normal seperti pertama.</p>
</body>

Jika kita lihat pada kode diatas maka hanya paragraf yang memiliki class small yang akan
dikenakan style didalamnya, sedangkan yang tidak terdapat claas small maka akan dikenakan
style yang ada pada tag p{font-size: 20px;} .

76
 Arif Maulana Yusuf

Selector Multiple class

<style>
body{
background-color: #fff2cc;
text-align:center;
}
.red{
fcolor: red;
}
.big {
font-size: 20px;
}
</style>
<body>
<h1 class="red">Judul ini tidak terpengaruh class small</h1>

<p>paragraf ini berwarna default hitam dan teks berukuran normal.</p>

<p class="big">paragraf ini berwarna default hitam dan teks berukuran normal. </p>

<p class="red big">paragraf ini berwarna merah dan berukuran teks 20px.</p>

</body>

Jika kita lihat pada potongan kode diatas terdapat penggunaan class red big secara bersamaan
maka secara otomatis style kedua class tersebut akan dikenakan, dimana teks didalam
tag <p> akan berwarna merah dan memiliki font berukuran 20px.

Selector dengan Atribut

<style>
body
{
background-color: #fff2cc;
}

77
 Arif Maulana Yusuf

input
{
width: 100%;
padding: 10px;
}
input[type=password]{
border: 2px solid red;
}
</style>
<body>
<form action="#">
Nama : <br>
<input type="text">

Password: <br>
<input type="password">
</form>
</body>

Jika kita lihat pada kode diatas, maka input type password akan dikenakan style
pada input[type=password]{border: 2px solid red;}.

Selector pseudoclass
Pseudoclass selector adalah selector CSS yang diikuti oleh titik dua. kita mungkin sudah sangat
familiar dengan beebrapa perintahnya seperti hover:

a:hover
{
/* hover adalah sebuah pseudo class */
}
<style>
body
{
background-color: #fff2cc;

78
 Arif Maulana Yusuf

text-align :center;
}
button
{
background-color: lightsteelblue;
border: 1px solid steelblue;
font-size: 20px;
padding: 20px 40px;
}
button:hover
{
background-color: steelblue;
color: white;
}
</style>
<body>
<button>Hover Saya</button>
</body>

79
 Arif Maulana Yusuf

Membuat Layout Dasar

Buat folder baru dengan nama latihan-layout/ dan buat file baru dengan nama index.html di
dalamnya. Tulislah kode HTML berikut pada file index.html:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style type="text/css">
.header {
background-color: #eee;
min-height: 50px;
}
.content {
background-color: #ddd;
min-height: 500px;
}
.footer {
background-color: #ccc;
min-height: 50px;
}
</style>
</head>
<body>
<div class="header">
<h1>Logo Produk</h1>
</div>

<div class="content">
<h2>Our Products</h2>
</div>

<div class="footer">
<p>copyright 2018 My Page</p>
</div>

80
 Arif Maulana Yusuf

</body>
</html>

Pada kode di atas, kita membuat 3 buah elemen utama di bawah <body>, yakni <div> dengan
masing-masing class header, content dan footer. Pada <div> dengan class header, kita akan isi
dengan logo dan menu halaman. Kemudian pada <div> dengan class content, kita isi dengan
konten dari web kita nanti, yakni daftar artikel. Dan terakhir pada <div> dengan class footer,
kita isi dengan teks copyright.

Pada bagian <head> kita telah mendefinisikan style untuk setiap <div>, diantaranya
background-color untuk memberi warna latar agar kotak dari setiap elemen dapat kita lihat
batas masing-masingnya. Kita juga menambahkan style min-height untuk mengatur tinggi
minimum dari setiap elemennya. Setiap style kita set menggunakan nama classnya.

Bila kita buka halaman html tersebut di browser, maka akan muncul seperti ini:

Setiap elemen <div> di atas menjadi baris layout. Karena <div> bersifat block, maka lebar dari
elemennya akan menghabiskan ruang parentnya ke samping. Bila kita ingin membuat layout
boxed, yakni layout halaman dengan jarak pinggir di kiri dan di kanan, maka kita dapat
menyimpan semua <div> tersebut di dalam satu <div> utama sebagai parentnya.

Ubah kode HTML yang dicetak tebal pada bagian body sehingga menjadi seperti ini:

81
 Arif Maulana Yusuf

<body>
<div class="container">
<div class="header">
<h1>Logo Produk</h1>
</div>

<div class="content">
<h2>Our Products</h2>
</div>

<div class="footer">
<p>copyright 2022 My Page</p>
</div>
</div>
</body>

Kemudian pada tag <style> di bagian header, tambahkan CSS berikut untuk memberi style pada
elemen <div> yang berclass container:

<style type="text/css">
.container {
width: 800px;
margin: 0 auto;
}
.header {
background-color: #eee;
min-height: 50px;
}
</style>

Dengan menyimpan ketiga elemen <div> baris di dalam <div> utama, maka lebar dari
setiap <div> anaknya akan mengikuti lebar elemen induknya.

82
 Arif Maulana Yusuf

Perbaharui kode HTML di dalam <div class=”header”></div> menjadi seperti ini:

<div class="header">
<h1>Logo Produk</h1>
<div class="logo">
<img src="https://i.ibb.co/7bQ4mVX/images.png">
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

Bila kita lihat hasilnya di browser, maka gambar dan list menu akan tampil seperti ini:

83
 Arif Maulana Yusuf

Tambahkan kode CSS berikut pada tag <style> agar tampilannya menjadi rapi.

.header {
background-color: #eee;
min-height: 50px;
text-align: center;
}
.logo img {
width: 200px;
}
.menu ul {
padding: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 10px 20px;
text-decoration: none;
}

84
 Arif Maulana Yusuf

Pada CSS di atas, kita menambahkan 3 selector baru, yakni selector untuk elemen image pada
.logo agar ukurannya tidak terlalu besar. Selain itu kita ubah mode display dari elemen <li> yang
defaultnya block menjadi inline-block agar ditampilkan menyamping. Kita juga menambahkan
padding pada setiap link menu dan membersihkannya dari garis bawah. Tampilan akhirnya akan
menjadi seperti ini:

85
 Arif Maulana Yusuf

Membuat Daftar Produk

Sekarang kita akan mengisi bagian konten halaman. Bagian konten akan kita isi dengan daftar
produk. Edit kode bagian content menjadi seperti ini:

<div class="content">
<h2>My Articles</h2>
<h2>My Products</h2>

<div class="thumbnail">
<img src="http://via.placeholder.com/250x150">
<h2>Product 2</h2>
<p>Rp 250.000</p>
</div>
</div>

Kemudian pada bagian <style> tambahkan CSS berikut:

.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
}

Hasil dari kode di atas akan nampak seperti ini:

86
 Arif Maulana Yusuf

Kita ingin agar dalam satu baris, terdapat 3 buah produk yang ditampilkan. Sedangkan pada
hasil kode yang sudah kita miliki, kita hanya memiliki satu buah produk yang memenuhi semua
lebar baris. Oleh karena itu, kita harus mengatur width dari elemen .thumbnail agar dalam satu
baris dapat masuk 3 buah produk.

Tambahkan baris kode CSS berikut pada bagian selector .thumbnail:

.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
width: 225px;
margin: 10px;
}

Kita set widthnya menjadi 225px dengan asumsi dari total lebar parentnya yang 800px dapat
diisi dengan tiga buah kotak thumbnail berukuran 225px. Selain itu kita juga menambahkan
margin pada thumbnail agar jarak satu sama lain tidak berhimpitan. Hasil akhir dari
pembaharuan kode di atas akan menjadi seperti ini:

87
 Arif Maulana Yusuf

Dan bila kita menyalin elemen .thumbnail menjadi 3 buah, akan nampak seperti ini:

Ternyata .thumbnail kedua dan ketiga akan ditampilkan ke bawah, meskipun width dari setiap
thumbnail sudah dibuat lebih kecil. Hal ini terjadi karena sifat display:block dari elemen
.thumbnail yang akan mengisi lebar dari parentnya. Adapun ruang kosong di sebelah kanan dari
setiap elemen .thumbnail setelah widthnya diperkecil akan otomatis menjadi margin dari
elemen tersebut.

88
 Arif Maulana Yusuf

Tambahkan CSS berikut pada selector .thumbnail:

.thumbnail {
background-color: white;
text-align: center;
padding: 10px;
width: 225px;
margin: 10px;
float: left;
}
.thumbnail img {
width: 100%;
}

Pada .thumbnail, kita tambahkan property float:left sehingga ruang sisa dari setiap barisnya
akan kosong dan diisi oleh elemen di bawahnya. Selain itu kita juga menambahkan selector baru
yakni untuk elemen image yang ada di dalam .thumbnail agar ukuran widthnya mengikuti
ukuran dari parentnya.

Hasil akhir dari pembaharuan kode kita akan tampil seperti ini:

89
 Arif Maulana Yusuf

Masalah selanjutnya yang harus kita tangani dari penggunaan float adalah membersihkan efek
float. Bila kamu coba menyalin elemen .thumbnail menjadi 6 buah atau lebih, maka tampilannya
akan seperti ini:

Seperti kita lihat, .thumbnail keluar dari kotak, dan teks footer naik mengisi ruang kosong di
sebelah kanan .thumbnail terakhir. Untuk mengatasi hal ini, kita cukup menambahkan CSS
overflow:auto pada parent dari .thumbnail, yakni pada elemen .content:

.content {
background-color: #ddd;
min-height: 500px;
overflow: auto;
}

Dengan demikian, efek float tidak akan mengenai elemen yang ada di bawahnya.

90
 Arif Maulana Yusuf

Terakhir kita tinggal merapikan konten untuk footer, dengan menambahkan padding dan rata
tengah. Tambahkan CSS berikut pada bagian selector .footer:

.footer {
background-color: #ccc;
min-height: 50px;
padding: 20px;
text-align: center;
}

91
 Arif Maulana Yusuf

Membuat Menu Dropdown

Misalkan kita ingin bila menu About di header disorot pointer mouse, dia akan menampilkan
submenu, dan bila pointer dijauhkan, submenunya disembunyikan kembali. Untuk membuat
fitur tersebut, kita membutuhkan property position untuk mengatur tata letak submenunya,
dan juga property display untuk menampilkan dan menyembunyikan submenu.

Tambahkan elemen html berikut di bagian .menu di header:

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="#">CV</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Kemudian tambahkan CSS selector baru di bagian style:

ul.submenu {
background-color: #eee;
border: 1px solid #ccc;
text-align: left;
}

Kita menambahkan elemen <ul> baru di dalam list menu About. Kemudian kita juga
menambahkan style agar submenu tersebut tampil dengan latar warna dan border. Hasilnya
akan nampak seperti ini:

92
 Arif Maulana Yusuf

Masih belum sesuai dengan yang kita harapkan karena seharusnya list submenunya tampil ke
bawah, bukan ke samping. Hal ini terjadi karena pada bagian sebelumnya kita memberi style
pada elemen <li> agar ditampilkan menyamping dengan property display:inline-block, sehingga
submenu yang juga menggunakan tag <li> akan terkena dampaknya. Untuk itu kita tambahkan
style untuk list yang khusus ada di dalam .submenu agar ditampilkan dengan display:block lagi:

ul.submenu li {
display: block;
}
ul.submenu li a {
display: block;
padding: 5px 10px;
}

Dengan demikian tampilan list submenunya sekarang ditampilkan ke bawah.

Namun posisinya masih tumpang tindih dengan menu utama. Kita akan gunakan
property position:absolute pada .submenu agar ia dapat diposisikan tidak mengikuti layout
bawaannya. Pada bagian selector ul.submenu yang telah kita buat sebelumnya, tambahkan
style berikut:

ul.submenu {
background-color: #eee;
border: 1px solid #ccc;

93
 Arif Maulana Yusuf

text-align: left;
position: absolute;
top: 20px;
left: 0;
}

Tampilan akhirnya akan jadi seperti ini:

Seperti yang kita duga, posisinya akan relatif dari jendela browser, bukan dari parentnya
yaitu <li> untuk About. Hal ini terjadi karena saat ul.submenudiberi property position:absolute,
dia akan naik satu layer/lapis ke atas dari elemen lain. Dan saat property top dan leftnya diset,
dia akan memposisikan diri dari elemen parent yang lapisannya sama, dalam kasus ini yaitu
jendela browser.

Kita ingin agar dia relatif dari parent <li>. Maka elemen <li> harus kita angkat juga satu lapis ke
atas, menggunakan property position:relative. Tambahkan property tersebut pada
selector .menu ul li:

.menu ul li {
display: inline-block;
position: relative;
}

Hasilnya, .submenu kita sekarang akan diposisikan relatif dari parent <li>.

94
 Arif Maulana Yusuf

Terakhir, kita akan sembunyikan .submenu dan hanya menampilkannya bila pointer mouse
berada di atas menu About. Tambahkan CSS berikut pada style:

ul.submenu {
background-color: #eee;
border: 1px solid #ccc;
text-align: left;
position: absolute;
top: 20px;
left: 0;
display: none;
}
.menu ul li:hover ul.submenu {
display: block;
}

Kita mengubah nilai default property display dari elemen ul.submenu menjadi none, sehingga
dia tidak akan ditampilkan di browser. Kemudian kita membuat selector baru .menu > ul >
li:hover ul.submenuyang artinya pilihul.submenu yang ada di bawah li yang dihover oleh mouse.
Kita ubah property displaynya menjadi block. Dengan demikian, ul.submenu akan ditampilkan
hanya bila parent <li>nya dihover mouse.

95
 Arif Maulana Yusuf

Menambahkan Jumbotron

Kita akan menambahkan banner besar atau biasa disebut jumbotron, diantara header dan
content. Tambahkan kode HTML berikut antara elemen .header dan .content:

<div class="jumbotron">
<h2>Welcome to My Homepage</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor necessitatibus quae
voluptate explicabo architecto fugiat asperiores illo quibusdam qui mollitia, porro fugit. Illum
sapiente modi, ut harum aliquam accusamus unde.</p>
</div>

Kemudian pada bagian style, tambahkan CSS berikut:

.jumbotron {
width: 100%;
padding: 80px 40px;
box-sizing: border-box;
text-align: center;
color: white;
background-color: #aaa;
}

Hasil dari kode di atas akan tampil seperti ini:

96
 Arif Maulana Yusuf

Kita sekarang akan mengganti latar warnanya menggunakan gambar. Kamu bisa mengambil
gambar yang gratis di internet, salahsatunya dapat kamu unduh dari website
[https://unsplash.com].Website tersebut menyediakan gambar-gambar berkualitas bagus dan
gratis.

Pada tutorial ini saya akan menggunakan gambar dari web Unsplash dengan url ini:
[https://images.unsplash.com/photo-1515111293107-b0cd6448f5f6?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=forma
t&fit=crop&w=1350&q=80]

Saya akan menggunakan langsung url tersebut pada CSS. Kamu dapat mengunduhnya terlebih
dahulu dan menyimpannya di dalam folder project, atau langsung menggunakan url tersebut.
Bila Kamu langsung menggunakan url tersebut, gambar tersebut nantinya hanya akan tampil
bila terkoneksi dengan internet.

Tambahkan CSS berikut di bagian selector .jumbotron:

.jumbotron {
background-color: #aaa;
background-image: url(https://images.unsplash.com/photo-1515111293107-
b0cd6448f5f6?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e4f56141064dbe63db663bb7a2c73b71&auto=forma
t&fit=crop&w=1350&q=80);

97
 Arif Maulana Yusuf

background-size: cover;
}

Kita menambahkan dua buat property, yakni background-image dan background-cover. Hasil
dari tambahan property tersebut akan tampil seperti ini:

Property background-size:cover akan membuat gambar latar ditampilkan hingga tidak ada area
yang tidak tertutup gambar latar.

Namun kombinasi warna teks dan gambar latar seperti hasil di atas kurang bagus, karena ada
area gambar yang warnanya sama dengan teks, sehingga teks tidak terbaca dengan jelas.
Untuk mengakali ini ada dua strategi. Pertama kita dapat edit dahulu gambar latarnya di aplikasi
image editor dengan menambahkan layer transparan gelap sehingga warna gambarnya
menjadi lebih gelap. Solusi kedua adalah dengan menambahkan layer transparan di HTML. Kita
akan mencoba solusi kedua.

Tambahkan elemen .overlaypada bagian jumbotron seperti ini:

<div class="jumbotron">
<div class="overlay"></div>
<h2>Welcome to My Homepage</h2>

98
 Arif Maulana Yusuf

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor necessitatibus quae
voluptate explicabo architecto fugiat asperiores illo quibusdam qui mollitia, porro fugit. Illum
sapiente modi, ut harum aliquam accusamus unde.</p>
</div>

Pada kode di atas kita menambahkan satu elemen <div>dengan nama class overlay. Elemen ini
tidak memiliki konten. Kita akan menggunakannya untuk membuat semacam lapisan warna
gelap yang agak transparan, dan kita posisikan di atas .jumbotron. Tambahkan CSS berikut:

.jumbotron {
background-size: cover;
position: relative;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
}

Pertama-tama kita buat supaya position .jumbotron menjadi relative. Baru kita set
position .overlay menjadi absolute. Kita set .overlay dengan warna latar hitam dan transparansi
atau opacity 0.4. Kita juga set width dan heightnya menjadi 100% dari ukuran jumbotronnya.
Hasilnya akan jadi seperti ini:

99
 Arif Maulana Yusuf

Jumbotronnya sekarang nampak lebih gelap dari sebelumnya, karena tertutup oleh overlay.
Kamu dapat mengganti nilai property opacity agar lapisan gelapnya lebih tebal atau tipis. Nilai
opacity berkisar antara 0 dan 1.

Namun jika kita perhatikan, teks di dalam jumbotron juga tertutup overlay. Kita ingin agar teks
tersebut ada di atas overlay, sehingga lebih mudah dibaca. Tambahkan CSS berikut:

.jumbotron h2,
.jumbotron p {
position: relative;
}

Dengan CSS di atas, elemen h2 dan p di dalam jumbotron akan naik ke layer di atas .overlay.

Terakhir, kita akan ganti font dari teks di jumbotron dengan jenis font lain yang lebih indah.
Kamu dapat membuka website [ https://fonts.google.com] dan memilih font mana yang akan
digunakan. Pada tutorial ini kita akan menggunakan font dengan nama Raleway.

Klik ikon (+) di bagian kanan atas font yang ingin dipilih:

100
 Arif Maulana Yusuf

Maka akan muncul panel di bagian bawah jendela. Klik panel tesebut sehingga muncul
keterangan kode yang harus kita salin di dokumen html kita:

Pertama salin kode <link href=”... >dan simpan di bagian atas <head>sebelum <style> :

101
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style type="text/css">

Kemudian kita dapat menambahkan kode font-family: 'Raleway', sans-serif; pada elemen yang
ingin kita ganti fontnya. Misalnya saya akan pasang font tersebut pada .jumbotron:

.jumbotron {
font-family: 'Raleway', sans-serif;
width: 100%;
padding: 80px 40px;
box-sizing: border-box;
text-align: center;
color: white;
}

Maka tampilannya sekarang, semua konten teks di dalam jumbotron akan menggunakan font
Raleyway.

102
 Arif Maulana Yusuf

Mengenal Fitur CSS3

CSS 3 adalah pengembangan dari generasi CSS sebelumnya, ada beberapa penambahan fitur
baru pada CSS 3 antara lain :

REM VALUES
Menentukan nilai relatif sebuah elemen terhadap elemen html.

Artinya, Jika ukuran font dari elemen html adalah 16px maka 1 rem = 16px untuk semua elemen.

contoh :

html
{
font-size : 20px;
}
p
{
font-size : 0.75rem;
}
label
{
font-size : 1.25rem;
}

dari contoh di atas, maka didapatkan ukuran font elemen p adalah 0.75 dari 20px yaitu 15px ,
sedangkan ukuran font elemen label adalah 1.25 dari 20px yaitu 25px.

BACKGROUND SIZE
Digunakan untuk menentukan ukuran gambar background.

Nilai Properti :

auto

103
 Arif Maulana Yusuf

Menghasilkan Nilai default. Gambar background ditampilkan dalam ukuran aslinya

contoh gambar berukuran width : 15px dan height : 15px , maka akan ditampilkan sesuai ukuran
tersebut, yakni width : 15px dan height : 15px

<style>
.banner
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-size:auto;
}
</style>

length

Mengatur lebar dan tinggi gambar background.

Nilai pertama menetapkan lebar, nilai kedua menetapkan tinggi.

Jika hanya satu nilai yang diberikan, yang kedua diatur ke "auto".

<style>
.banner
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-size:75px 75px
}
</style>

percentage

Mengatur lebar dan tinggi gambar background dalam persen elemen induk.

Nilai pertama menetapkan lebar, nilai kedua menetapkan tinggi.

Jika hanya satu nilai yang diberikan, yang kedua diatur ke "auto".

104
 Arif Maulana Yusuf

<style>
.banner
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-size:70% 70%;
}
</style>

cover

Mengubah ukuran gambar background untuk menutupi seluruh kontainer, bahkan jika harus
meregangkan gambar atau memotong sebagian dari ujung gambar.

<style>
.banner
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-size:cover;
}
</style>

contain

Mengubah ukuran gambar background sesuai ratio gambar dan memastikan gambar terlihat
sepenuhnya. Misalkan suatu kontainer memiliki ratio 18 dibanding 9 (misal width 180px dan
height 90px) , sedangkan gambar background memiliki ratio 15 dibanding 9 (misal width 150px
dan height 90px) maka gambar background akan ditampilkan sepenuhnya yaitu 150px dan
height 90px dan menyisakan ruang kosong (tanpa gambar) 30px.

<style>
.banner
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-size:contain;

105
 Arif Maulana Yusuf

}
</style>

CSS ANIMATION
Digunakan untuk menambahkan animasi pada halaman web

Browser pendukung :

Property Animation

43.0
Chrome
4.0 -webkit-

Internet Explore / Edge 10.0

16.0
Firefox
5.0 -moz-

9.0
Safari
4.0 -webkit-

30.0
Opera 15.0 -webkit-
12.0 -o-

Keterangan :

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung
properti.

Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja
dengan awalan -webkit-, -moz-, atau -o-.

Contoh Pengguna opera versi 30.0 ke atas :

div
{
animation-iteration-count: 2;
}

106
 Arif Maulana Yusuf

Sedangkan pengguna opera versi 15.0 hingga 29.0 :

div
{
-webkit-animation-iteration-count: 2;
}

Nilai Properti :

animation-name

menentukan nama keyframe yang akan dikaitkan ke selector

animation-duration

menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk
menyelesaikan animasi

animation-timing-function

Menentukan kurva kecepatan animasi

1. linear

mengatur animasi dengan kecepatan yang sama dari awal hingga akhir

2. ease

Nilai default animation-timing-function yaitu animasi memiliki kecepatan awal lambat,

kemudian cepat, kemudian berakhir perlahan

3. ease-in

mengatur animasi dengan kecepatan awal / permulaan yang lambat

4. ease-out

mengatur animasi dengan akhir yang lambat

5. ease-in-out

mengatur animasi dengan awal yang lambat dan akhir yang lambat

107
 Arif Maulana Yusuf

6. initial

menetapkan properti ke nilai default

7. inherit

Mengikuti nilai properti dari elemen induk, misalkan pada elemen induk diset ease-in-out
maka akan ikut diset ease-in-out juga.

animation-delay

menentukan penundaan / jeda sebelum animasi dimulai

animation-iteration-count

menentukan berapa kali animasi harus dimainkan

Contoh apabila harus dimainkan 2x :

div
{
animation-iteration-count: 2;
}

animation-direction

menentukan apakah animasi harus dimainkan ke depan, mundur atau gabungan maju dan
mundur (alternate).

Nilai properti :

1. normal

Animasi dimainkan seperti biasa (ke depan)

2. reverse

Animasi dimainkan secara terbalik (mundur)

3. alternate

Animasi dimainkan ke depan terlebih dahulu, lalu mundur

108
 Arif Maulana Yusuf

4. alternate-reverse

Animasi diputar mundur terlebih dahulu, lalu ke depan

5. initial

Mengatur animasi ke nilai default

6. inherit

Mengikuti nilai properti dari elemen induk, misalkan pada elemen induk diset reverse
maka akan ikut diset reverse juga.

Contoh penggunaan animation-direction :

div
{
animation-direction: reverse;
}

animation-fill-mode

menentukan gaya sebuah elemen ketika animasi tidak sedang dimainkan (sebelum dimulai,
setelah berakhir, atau keduanya).

animation-play-state

menentukan apakah animasi berjalan atau berhenti.

More Pseudoclass

Digunakan untuk menentukan style khusus suatu elemen :

:first-child

li:first-child

Tujuan contoh diatas adalah menentukan style khusus elemen <li></li> yang pertama.

<style>
li:first-child

109
 Arif Maulana Yusuf

{
background-color: yellow;
color : red;
}
</style>
<h1>Daftar Bekal Piknik</h1>
<ul>
<li>Nasi</li>
<li>Sate</li>
<li>Sayuran</li>
</ul>

:last-child

Kebalikan dari first child, menentukan style khusus elemen yang terakhir

<style>
li:last-child
{
background-color: yellow;
color : red;
}
</style>
<h1>Daftar Bekal Piknik</h1>
<ul>
<li>Nasi</li>
<li>Sate</li>
<li>Sayuran</li>
</ul>

110
 Arif Maulana Yusuf

nth-child (n)

Menentukan style khusus elemen yang diinginkan, misal elemen dengan urutan 2 dan 3.

<style>
li:nth-child(2),
li:nth-child(3)
{
background-color: yellow;
color : red;
}
</style>
<h1>Daftar Bekal Piknik</h1>
<ul>
<li>Nasi</li>
<li>Sate</li>
<li>Sayuran</li>
<li>Minuman</li>
</ul>

:nth-child (odd) dan :nth-child (even)

Menentukan style khusus elemen ganjil dan genap.

111
 Arif Maulana Yusuf

<style>
li:nth-child(odd)
{
background-color: yellow;
color : red;
}
li:nth-child(even)
{
background-color: orange;

}
</style>
<h1>Daftar Bekal Piknik</h1>
<ul>
<li>Nasi</li>
<li>Sate</li>
<li>Sayuran</li>
<li>Minuman</li>
</ul>

:first-letter

menentukan style khusus untuk huruf pertama pada suatu elemen

Box Shadow
Properti ini digunakan untuk menampilkan efek shadow / bayangan pada box.

Browser Pendukung:

112
 Arif Maulana Yusuf

Property box-shadow

10.0
Chrome
4.0 -webkit-

Internet Explore / Edge 9.0

4.0
Firefox
3.5 -moz-

5.1
Safari
3.1 -webkit-

Opera 10.5

<style>
div
{
padding :10px
margin : 10px 20px;
box-shadow: 2px 2px 10px 2px rgba(0,0,0,.3);
}
</style>
<div><p>The optional fourth value defines the spread of the shadow</p></div>

Jika ingin menampilkan efek bayangan ke dalam maka bisa menyisipkan inset.

<style>
div
{
padding :10px
margin : 10px 20px;
box-shadow: inset 2px 2px 10px 2px rgba(0,0,0,.3);
}
</style>
<div><p>The optional fourth value defines the spread of the shadow</p></div>

113
 Arif Maulana Yusuf

Text Shadow
Properti ini memberikan efek bayangan pada tulisan.

Browser Pendukung:

Property text-shadow

Chrome 4.0

Internet Explore / Edge 10.0

Firefox 3.5

Safari 4.0

Opera 9.6

<style>
h1
{
text-shadow: 2px 2px 8px #aaa;
color: white
}
</style>
<h1>The text Shadow Property</h1>

Border Radius
Properti ini berfungsi untuk membentuk sudut-sudut dari elemen, misal elemen dengan bentuk
awal persegi ingin dijadikan melingkar di sudut-sudutnya.

Browser Pendukung:

114
 Arif Maulana Yusuf

Property border-radius

5.0
Chrome
4.0 -webkit-

Internet Explore / Edge 9.0

4.0
Firefox
3.0 -moz-

5.0
Safari
3.1 -webkit-

Opera 10.5

<html>
<head>
<style>
#value1
{
border-radius: 20% 10%;
background: #000FFF;
padding: 20px;
width: 200px;
height: 140px;
}
</style>
</head>
<body>
<div id="value1"></div>
</body>
</html>

length

Pengisian nilai ini akan menentukan bentuk sudut dari elemen

1 nilai *lenght*

115
 Arif Maulana Yusuf

border-radius: 25px;

Apabila hanya diisi 1 nilai length, maka nilai tersebut berlaku untuk keempat sudut.

2 nilai *lenght*

border-radius: 25px 50px;

Apabila diisi 2 nilai length , maka nilai pertama berlaku untuk sudut kiri atas dan kanan bawah,
dan nilai kedua berlaku untuk sudut kanan atas dan kiri bawah.

3 nilai *lenght*

border-radius: 25px 50px 50px;

Apabila diisi 3 nilai length , Nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk
sudut kanan atas dan kiri bawah, dan nilai ketiga berlaku untuk sudut kanan bawah

4 nilai *lenght*

116
 Arif Maulana Yusuf

border-radius: 25px 50px 50px 25px;

Apabila diisi 4 nilai length , nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk
sudut kanan atas, nilai ketiga berlaku untuk sudut kanan bawah, nilai keempat berlaku untuk
sudut kiri bawah.

Pengisian nilai dalam bentuk % , ketentuannya sama seperti pengisian dalam bentuk length .

border-radius: 20% 10%;

initial

inherit

Gradient Background
Ada 2 jenis gradient background :

• linear
• Radial

117
 Arif Maulana Yusuf

<style>
.container div
{
width:130px;
height:130px;
display:inline-block;
margin:2px;
}
#el1{background:linear-gradient(to bottom,yellow,red)}
#el2{background:radial-gradient(red 5%, yellow 15%, green 60%);}
#el3{background:repeating-linear-gradient(red, yellow 10%, green 15%)}
#el4{background:repeating-radial-gradient(red,green 5px,white 5px, white 10px)}
</style>
<div class="container">
<div id="el1">Linear</div>
<div id="el2">Radial</div>
<div id="el3">Repeating Lin</div>
<div id="el4">Repeating Rad</div>

</div>

3D Transform
memungkinkan untuk mentransformasi 3D, contohnya untuk memberikan efek memutar suatu
elemen.

metode tranformasi 3 D

118
 Arif Maulana Yusuf

rotateX()

Metode rotateX () digunakan untu memutar elemen di sekitar sumbu X pada derajat tertentu,

misal diputar 180 derajat

rotateY()

Metode rotateY () digunakan untuk memutar elemen di sekitar sumbu Y pada derajat tertentu,
misal diputar 180 derajat

rotateZ()

Metode rotateZ () digunakan untu memutar elemen di sekitar sumbu Z pada derajat tertentu,

misal diputar 180 derajat .

#Div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

Demikian beberapa fitur-fitur yang disediakan oleh CSS3 semoga mudah dipelajari ya..

119
 Arif Maulana Yusuf

Mengenal Fitur HTML5

HTML5 adalah pengembangan HTML generasi sebelumnya yang menawarkan fitur-fitur baru
yang canggih dan lebih efisien dalam penulisan kodenya.

Berikut beberapa perbedaan HTML dan HTML5 beserta fitur baru yang ditawarkan :

Doctype
DOCTYPE ditulis sebelum tag <html> , digunakan untuk memberi instruksi ke web browser
tentang versi html yang akan ditulis.

HTML5

<!DOCTYPE html>

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Figure
Tag <figure> merupakan fitur yang ada di HTML5 . Tag <figure> menentukan konten yang
berdiri sendiri, seperti ilustrasi, diagram, foto dll.

• elemen <figcaption> digunakan untuk menambahkan keterangan pada elemen<figure>

<!DOCTYPE html>
<html>
<body>
<figure>
<img src="jeruk-1.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>
<p>Keterangan penggunaan figcaption</p>

120
 Arif Maulana Yusuf

</figcaption>
</figure>
</body>

</html>

"Type" - Link & Js

Digunakan untuk mengaitkan file javascript pada halaman HTML.

Perbedaan penulisan antara HTML dengan HTML5

HTML

<script src="path/scripts.js" type="text/javascript"></script>

HTML 5

<script src="path/cripts.js"></script>

Pada HTML5 tidak perlu ditulis type="text/javascript".

121
 Arif Maulana Yusuf

ID's & Classes

Perbedaan penulisan antara HTML dengan HTML5

HTML

<p class="myClass" id="myId">

HTML5

<p class=myClass id=myId>

Pada HTML5 tidak harus menulis tanda petik untuk menyebutkan id dan class, namun apabila
class yang digunakan lebih dari 1 maka tetap harus menulis tanda petik.

<p class="myClass pClass" id="myId">

UL Editable
HTML5

Pada HTML5 terdapat penambahan fitur contenteditable yang digunakan untuk menentukan
apakah konten dapat diedit atau tidak.

<ul contenteditable=true>
<li>PHP</li>
<li>CSS</li>
<li>Javascript</li>
</ul>

? Pada list tersebut, user dapat melakukan edit list sendiri misalnya menambahkan data baru.

122
 Arif Maulana Yusuf

HTML

belum ada fitur contenteditable

Placeholders
Atribut placeholder digunakan untuk memberikan petunjuk atau keterangan pada kolom input
dengan tujuan agar user memasukkan nilai data dengan benar.

Atribut placeholder dapat digunakan pada tipe input : text, search, url, tel, email, dan password.

Hasil dari penggunaan atribut placeholder ditampilkan pada kolom input .

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Nama: <input type="text" name="nama" placeholder="Donald"><br><br>
Email: <input type="email" name="email" placeholder="[email protected]"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Required
Atribut required menentukan bahwa suatu kolom input harus diisi sebelum mengirimkan form.

Atribut ini dapat berfungsi pada tipe input : text, search, url, tel, email, password, date pickers,
number, checkbox, radio, dan file.

123
 Arif Maulana Yusuf

HTML5

<input type="text" name="nama" required>

<!DOCTYPE html>
<html>
<body>
<form action="aksi.php">
Nama: <input type="text" name="nama" required>
<input type="submit">
</form>
</body>
</html>

Ketika mengirim form tanpa mengisi kolom input, maka akan muncul notifikasi sbb :

HTML

Pada HTML belum ada atribut required

Autofocus
Atribut autofocus menentukan letak fokus utama saat sebuah halaman web dimuat.

HTML5

Contoh Kita akan menempatkan fokus utama pada kolom input username saat halaman login
dimuat.

124
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<body>
<form action="login.php">
Username: <input type="text" name="username" autofocus><br><br>
Password: <input type="text" name="password"><br>
<input type="submit">
</form>
</body>
</html>

Cursor otomatis fokus pada kolom input username.

HTML

Pada HTML belum ada atribut autofocus

Audio
Digunakan untuk menambahkan audio seperti mp3, ogg dsb ke halaman web

HTML5

Format audio yang disupport browser :

Browser MP3 Wav Ogg

Internet Exploer 9+ YES NO NO

Chrome 6+ YES YES YES

Firefox 3.6+ NO YES YES

125
 Arif Maulana Yusuf

Browser MP3 Wav Ogg

Safari 5+ YES YES NO

Opera 10+ NO YES YES

Contoh :

<!DOCTYPE html>
<html>
<body>
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg">
<source src="file.mp3">
</audio>
</body>
</html>

HTML

Pada HTML belum ada atribut audio

Video
Digunakan untuk menambahkan video ke halaman web

HTML5

Format video yang disupport browser :

Browser MP4 WebM Ogg

Internet Exploer 9+ YES NO NO

Chrome 6+ YES YES YES

Firefox 3.6+ NO YES YES

Safari 5+ YES NO NO

Opera 10.6+ NO YES YES

126
 Arif Maulana Yusuf

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls preload>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>
</body>
</html>

HTML

Pada HTML belum ada atribut video.

Data Attributes
Data attributes adalah fitur baru di HTML5, maka pada HTML sebelumnya fitur data atrribut
belum tersedia.

Data attributes digunakan untuk menyimpan kustomasi data secara pribadi.

Data yang disimpan (kustomasi) kemudian dapat digunakan di halaman JavaScript untuk
menampilkan halaman yang lebih menarik.

sintaks :

<element data-*="somevalue">

data-* attributes terdiri dari 2 bagian

Nama atribut

Tidak boleh berisi huruf besar, dan setidaknya harus memiliki panjang satu karakter setelah
awalan "data-"

Nilai atribut

Bisa berupa string apa pun.

127
 Arif Maulana Yusuf

<div id="myDiv" data-custom-attr="MyValue"> Text</div>

Semantic Tags
Semantic tags mendefinisikan dengan jelas fungsi / makna penggunaan tags tersebut, semantic
tags dapat memudahkan developer dan browser memahami konten.

HTML

Pada HTML belum terdapat semantic tags, biasanya menggunakan tag

dan untuk pembuatan konten.

HTML 5

Elemen semantic tags

Nama Elemen Keterangan

<aside> Mendefinisikan konten selain konten utama

<article> Mendefinisikan artikel

Menentukan detail tambahan yang dapat dilihat atau disembunyikan oleh

<details>
pengguna

<figcaption> Menentukan keterangan untuk elemen

<figure> Menentukan konten yang berdiri sendiri, seperti ilustrasi, diagram, foto dll.

<footer> Mendefiniskan footer suatu halaman / dokumen

<header> Mendefiniskan header suatu halaman / dokumen

<main> Menentukan isi utama suatu halaman / dokumen

<mark> Menentukan teks yang ditandai / disorot

<nav> Menentukan tautan/link navigasi

<section> Mendefinisikan bagian dalam dokumen

<summary> Menentukan heading yang terlihat untuk elemen <details>

<time> Menentukan tanggal / waktu

128
 Arif Maulana Yusuf

Contoh penulisan semantic tags:

<nav>
<a href="html">HTML</a> |
<a href="css">CSS</a> |
<a href="js">JavaScript</a> |
<a href="jquery">jQuery</a>
</nav>
<header><p>Codepolitan</p></header>
<article>
<section>
Semantic tags mendefinisikan dengan jelas fungsi / makna penggunaan tags tersebut,
semantic tags dapat memudahkan developer dan browser memahami konten.
</section>
</article>
<aside>
<p>Belajar HTML5</p>
</aside>
<footer>
<p>Posted by: Codepolitan</p>

129
 Arif Maulana Yusuf

</footer>

Demikian beberapa fitur yang disediakan oleh HTML5 semoga mudah dipahami..

130