PEMROGRAMAN WEB : HTML
DAN CSS
Dr. Wahyudi, S.T., M.T.
PENERBIT CV. EUREKA MEDIA AKSARA
i
PEMROGRAMAN WEB : HTML DAN CSS
Penulis : Dr. Wahyudi, S.T., M.T.
Desain Sampul : Eri Setiawan
Tata Letak : Meilita Anggie Nurlatifah
ISBN : 978-623-487-353-5
Diterbitkan oleh : EUREKA MEDIA AKSARA,
NOVEMBER 2022
ANGGOTA IKAPI
JAWA TENGAH NO. 225/JTE/2021
Redaksi :
Jalan Banjaran, Desa Banjaran RT 20 RW 10 Kecamatan
Bojongsari Kabupaten Purbalingga Telp. 0858-5343-1992
Surel : [email protected]
Cetakan Pertama : 2022
All right reserved
Hak Cipta dilindungi undang-undang
Dilarang memperbanyak atau memindahkan sebagian atau
seluruh isi buku ini dalam bentuk apapun dan dengan cara
apapun, termasuk memfotokopi, merekam, atau dengan
teknik perekaman lainnya tanpa seizin tertulis dari penerbit.
ii Pemrograman Web : HTML dan CSS
KATA PENGANTAR
Alhamdulillahirobbil'alamin. Penulis bersyukur
kehadirat Allah SWT berkat rahmat, karunia dan
pertolonganNya, penulis dapat menyelesaikan buku berjudul
µPemrograman Web : HTML dan CSSµ 6KDODZDW VHUWD VDODP
semoga senantiasa tercurah atas Nabi Muhammad SAW, para
kerabat, serta pengikutnya hingga hari kiamat nanti.
Buku ini hadir untuk menambah literasi tentang
teknologi informasi. Buku ini menjelaskan tentang bahasa
pemrograman web HTML dan CSS. Buku ini menjelaskan
dari awal bagaimana menggunakan HTML dan
mengkombinasikan HTML dengan CSS. Buku ini cocok bagi
anda yang baru belajar tentang pemrograman web.
Penulis menyadari bahwa dalam penulisan buku ini
masih banyak terdapat kekurangan, untuk itu penulis
mengharapkan kritik dan sarannya guna penyempurnaan
buku ini di masa mendatang
Padang, Februari 2022
Penulis
iii
DAFTAR ISI
KATA PENGANTAR ............................................................... iii
DAFTAR ISI ............................................................................... iv
BAB 1 HTML DASAR ............................................................... 1
A. Pengenalan HTML ..................................................... 1
B. Tag, Element, Atribut HTML .................................... 3
C. Heading pada HTML ................................................. 7
D. Paragraf pada HTML ............................................... 11
BAB 2 HTML LANJUTAN ..................................................... 15
A. Tabel Pada HTML..................................................... 15
B. Hyperlink pada HTML ............................................ 17
C. List pada HTML........................................................ 17
D. Gambar pada HTML ................................................ 19
E. Video pada HTML.................................................... 21
F. Form pada HTML ..................................................... 26
BAB 3 PENGENALAN CSS ................................................... 33
A. Fungsi dan Kegunaan CSS ...................................... 33
B. Cara Penggunaan CSS.............................................. 34
C. Penulisan CSS............................................................ 35
D. Penggunaan Spasi antar Karakter .......................... 42
E. Property CSS ............................................................. 45
BAB 4 CSS LANJUTAN .......................................................... 57
A. Mengenal Posisi Pada CSS ...................................... 57
B. Penerapan CSS Pada Tabel ...................................... 83
C. CSS Untuk Memformat Tampilan Form ............... 94
DAFTAR PUSTAKA ............................................................... 110
iv Pemrograman Web : HTML dan CSS
BAB
HTML DASAR
1
A. Pengenalan HTML
HTML (Hyper Text Markup Languange) adalah
sebuah bahasa formatting yang digunakan untuk
membuat sebuah halaman website. Dalam dunia
pemrograman berbasis website, HTML menjadi
pondasi dasar pada halaman website. Sebuah file
HTML disimpan dengan ekstensi .html (dot html). File
tersebut dapat di akses menggunakan web browser.
Seperti yang sudah dijelaskan, HTML merupakan
dasar dari sebuah website, namun untuk membuat
website tidak cukup hanya menggunakan HTML, kita
memerlukan bantuan CSS, JavaScript dan PHP untuk
membuat sebuah website yang dinamis.
Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah
halaman website. Adapun yang dapat dilakukan
dengan HTML adalah sebagai berikut:
x Membungkus element-element tertentu sesuai
kebutuhan
x Membuat heading atau format judul
Pemrograman Web : HTML dan CSS 1
BAB
HTML LANJUTAN
2
A. Tabel Pada HTML
Tabel merupakan struktur yang digunakan
untuk menampilkan informasi dalam baris dan kolom
pada HTML. Untuk pembuatan tabel menggunakan
tag <table>, menggunakan tag <tr> untuk membuat
baris, dan <td> untuk membuat kolom.
Tag <table> merupakan tag pembuka dalam
membuat sebuah tabel pada html, tanpa <table> ini,
penggunaan <tr> dan <td> tidak bisa difungsikan
dengan baik.
Untuk lebih detailnya, Buat sebuah file latihan
dan beri nama: Tabel.html
<!DOCTYPE html>
<html>
<head>
<title>Tabel pada HTML</title>
</head>
<body>
<h2>Contoh Membuat Tabel</h2>
<table border="1">
<tr>
Pemrograman Web : HTML dan CSS 15
BAB
PENGENALAN CSS
3
&66 PHUXSDNDQ VLQJNDWDQ GDUL ´&DVFDGLQJ 6W\OH
6KHHWµ 6HVXDL GHQJDQ QDPDQ\D &66 PHPLOLNL VLIDW ´VW\OH
VKHH ODQJXDJHµ \DQJ EHUDUWL EDKDVD SHPURJUDPDQ \DQJ
digunakan untuk web design. Dalam mendesign halaman
website, CSS menggunakan penanda yang kita kenal
dengan id dan class.
CSS merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web Consortium
atau W3C pada tahun 1996. Setelah CSS di
standarisasikan, internet explorer dan Netscape merilis
browser terbaru yang mendukung standar CSS. Terdapat
tiga versi CSS, CSS1, CSS2, dan CSS3.
Seiring berkembangnya dunia pemrograman dan
teknologi, CSS tidak cuma digunakan di HTML dan
XHTML saja. Tapi sudah bisa digunakan untuk
mendesign tampilan aplikasi android.
A. Fungsi dan Kegunaan CSS
CSS merupakan pengembangan dari HTML
dalam format dokumen web. Adanya CSS
memudahkan kita untuk mengatur dan memilih
Pemrograman Web : HTML dan CSS 33
BAB
CSS LANJUTAN
4
A. Mengenal Posisi Pada CSS
Posisi pada CSS digunakan untuk mengatur
posisi sebuah element HTML. Dengan menggunakan
property position CSS ini kita dapat menentukan posisi
sebuah elemet HTML sesuai dengan yang di inginkan.
Berikut adalah beberapa property CSS yang dapat
digunakan untuk menentukan posisi sebuah element
HTML adalah:
x Static
Posisi static digunakan untuk mengatur
element menjadi statis secara default. Value static
akan membuat suatu element bertumpukan. Berikut
adalah contohnya, buat sebuah file html dengan
nama: static.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Pemrograman Web : HTML dan CSS 57
DAFTAR PUSTAKA
Hadi, D. A. (2019). Ebook Belajar HTML & CSS Dasar.
MalasNgoding.
Huda, N. (2021, February 14). HTML Dasar: Pengenalan
(Halo Dunia!). Retrieved January 12, 2022, from
Jago Ngoding:
https://jagongoding.com/web/html/dasar/pen
genalan/
Muhardian, A. (2022, January 12). Belajar HTML dari Nol:
Pengenalan Dasar HTML untuk Pemula.
Retrieved January 13, 2022, from Petani Kode:
https://www.petanikode.com/html-dasar/
Susanto, D. (2017, August 21). Praktikum 3 - Pengenalan
CSS. Retrieved January 13, 2022, from SCRIBD:
https://www.scribd.com/document/356829667
/Praktikum-3-pengenalan-Css
Tagger, B. (2014, February). Modul Pemrograman Web.
Retrieved January 15, 2022, from Researchgate:
https://www.researchgate.net/publication/316
664126_Modul_Pemrograman_Web_Dimulai_da
ri_penggunaan_HTML_sampai_Javascript
Yuliana, Y. (2016, May 2). ResearchGate. Retrieved
January 13, 2022, from Modul Seputar HTML 5:
https://www.researchgate.net/publication/301
772321_Modul_Seputar_HTML_5
110 Pemrograman Web : HTML dan CSS
