Modul Pemrograman Web

Pemrograman Web1
MODUL
PEMROGRAMAN WEB I
Program Studi Bisnis Digital

SEKOLAH TINGGI MANAJEMEN
INFORMATIKA DAN KOMPUTER
PELITA NUSANTARA
i
Pemrograman Web1
DAFTAR ISI
Kata Pengantar………………………………..………………...i
DAFTAR ISI ............................................................................. ii
PENDAHULUAN WEBSITE ................................................... 1
1.1 Pengertian dan Latar Belakang Website ........................ 1
1.2 Jenis Website ................................................................. 2
1.3 Domain dan jenis-jenis domain ..................................... 5
1.4 Hosting .............................................................................. 6
BAB 2 ......................................................................................... 7
MENGENAL EDITOR HTML DAN STRUKTUR HTML ...... 7
2.1. Jenis-jenis editor .............................................................. 7
2.2. Pengertian Sejarah Html ................................................ 10
2.3. Struktur HTML .............................................................. 12
2.4. Menampilkan HTML pada Browser .............................. 13
BAB 3 ...................................................................................... 16
ELEMEN DAN ATRIBUT HTML .......................................... 16
3.1. Elemen HTML ............................................................... 16
3.2 Elemen Blok................................................................... 19
3.3 Elemen inline ................................................................. 23
3.4 Atribut pada HTML ..................................................... 24
3.4.1 Atribut Href dari tag a ................................................. 25
3.4.2 Atribut src dari tag img .............................................. 26
3.4.3 Atribut style ................................................................. 28
3.4.4 Atribut align ................................................................ 29
3.4 Komentar......................................................................... 31
BAB 4 ...................................................................................... 32
WARNA DAN LATAR BELAKANG PADA HTML ............ 32
4.1 Warna Latar Belakang ................................................. 32
4.2 Latar Belakang dengan warna border .................... 33
4.3 Warna Font ................................................................. 35
BAB 5 ...................................................................................... 37
TABEL PADA HTML ............................................................. 37
5.1 Tabel ............................................................................ 37
5.2 Penggabungan Baris Dan Kolom Pada Tabel ............ 40
5.3 Penggunaan Colspan dan Rowspan ............................... 41
ii
Pemrograman Web1
BAB 6 ....................................................................................... 50
FORM PADA HTML ............................................................... 50
6.1 Pengertian Form ........................................................... 50
6.2 Atribut Form ............................................................... 51
6.3 Jenis Inputan............................................................... 51
BAB 7 ....................................................................................... 65
Cascading Style Sheets (CSS) .................................................. 65
7.1 Pengertian CSS (Cascading Style Sheets) .................... 66
7.2 Struktur CSS .................................................................. 66
7.3 CSS Selector .................................................................. 67
7.4 Cara menggunakan CSS pada HTML............................. 70
BAB 8 ....................................................................................... 74
Cascading Style Sheets (CSS) .................................................. 74
8.1 Property pada CSS .......................................................... 74
BAB 9 ....................................................................................... 78
Pseudo Class Cascading Style Sheets (CSS) ............................ 78
9.1 Pengertian Pseudo Class CSS ......................................... 78
BAB 10 ..................................................................................... 82
TABEL DAN FORM HTML DENGAN CSS ......................... 82
10.1 Tabel dan form dengan CSS ......................................... 82
BAB 11 ..................................................................................... 90
CSS NAVIGATION BAR ........................................................ 90
11.1 Pengertian Navigation Bar ............................................ 90
11.2 Navigasi Vertival dengan CSS ...................................... 91
11.3 Navigasi Horizontal dengan CSS .................................. 94
BAB 12 ..................................................................................... 97
CSS WEBSITE LAY OUT RESPONSIVE ............................. 97
12.1 Pengertian Lay Out ....................................................... 97
BAB 13 ................................................................................... 107
BOOTSTRAP ......................................................................... 107
BAB 14 ................................................................................... 123
JAVA SCRIPT ....................................................................... 123
iii
Pemrograman Web1
BAB 1
PENDAHULUAN WEBSITE
1.1 Pengertian dan Latar Belakang Website

Web (awalnya disebut World Wide Web, dengan demikian
"www" di situs alamat) hanyalah salah satu cara informasi dapat
dibagikan melalui internet. Ini unik karena memungkinkan text,
dokumen, gambar dan video untuk dihubungkan satu sama lain
melalui link hypertext sehingga membentuk "web" besar
informasi yang terhubung. Web menggunakan protokol yang
disebut HTTP (HyperText Transfer Protocol). Akronim itu harus
terlihat familier karena ini adalah empat huruf pertama dari
hampir semua alamat situs web, seperti yang akan kita bahas di
bagian selanjutnya.
Website pertama kali ditemukan oleh Sir Timothy John, tim
burners-Lee. website pertama kali terhubung dengan jaringan
pada tahun 1991 kala itu tujuan dari pembuatan website adalah
untuk saling menukar dan mengupdate informasi sesama peneliti
1
Pemrograman Web1
di tempat masing-masing mereka bekerja dengan mudah. Hal

itulah yang membuat bahwa definisi dari website kala itu adalah
media untuk saling bertukar informasi. pada tahun 1993 web di
publish pertama kali dan tampilan dari website kala itu hanya
berupa teks (Hypertext). Dan setelah itu National Center for
Supercomputer Applications (NCSA) mencipatakan Graphical
User Interface (GUI) dengan nama Mosaic. Mosaic ini mulai
membuat website menjadi lebih menarik dan interaktif dan dapat
memuat gambar serta dilengkapi dengan link audio dan video.
Dan menjadikan Web media yang di minati dan paling popular.
(Suyanto, 2003 : 46). Tahun 1994 tokoh Mosaic mulai
mendirikan Netscape Communication Corporation dengan nama
program Netscape Navigator. Kemudian disusul munculnya Web
Browser yang bernama Microsoft Internet Explorer, yang dibuat
oleh Microsoft. (Suyanto, 2003 : 46).
1.2 Jenis Website
Web di kelompokan menjadi beberapa jenis berdasarkan
tujuannya, yaitu : 1. Alat Pemasaran
Website menjadi media pemasaran yang banyak di gunakan dan
populer saat ini dikarenakan biaya yang murah daripada media
alat pemasaran konvensional lainnya seperti, majalah, borsur
papan iklan, dan koran, selain itu website menjadi alat promosi
dan interaktif dikarenakn konten yang dimuat menarik berupa
gambar dan video dan bisa tersebar luas melalui jaringan internet
ke seluruh penjuru dunia.
2
Pemrograman Web1
2. Katalog
Katalog merupakan hal yang penting bagi perusahaan atau
instansi untuk membuat list daftar produk dan dokumentasi,
cara kerja katalog ini juga bisa diterapkan diwebsite yang
berupa katalog online dan bisa di akses melalui internet.
a. E-Commerce
E-Commerce adalah kegiatan perdagangan yang penjualan,
pembelian, penyebaran, pemasaran barang dan jasa melalui
media electronik seperti internet, aplikasi, dan jaringan
komputer lainnya. Dan contoh bisnis ECommerce yang
sukses di indonesia adalah: Tokopedia, OLX, G0-Jek,
BukaLapak, Tiket.com, Blili dan masih banyak yang
lainnya.
5. E-Learning
E- Learning adalah bentuk dari teknologi informasi yang
diterapkan di dunia pendidikan yang berupa website yang
berisikan modul pembelajaran untuk peserta didik
berinteraksi dan berbagi informasi dengan materi belajar
dan bisa diakses berulang-ulang.
6. Komunitas
Website yang bertujuan untuk tempat berbagi sebuah
komunitas dan memungkinkan anggota dari sebuah
komunitas tersebut untuk berkomunasi secara kelompok,
berdiskusi, berbagi cerita, ide, pengalaman, dan membantu
3
Pemrograman Web1
memecahkan masalah anggota yang bertanya di website

tersebut.
7. Portal
Portal Berbasis Web adalalah Website yang bersifat seperti
saluran tunggal atau pintu gerbang sebuah instansi untuk
mengakses informasi terdistribusi yang meliputi berita,
dokumen dan tautan ke situs tertentu yang bersifat khusus
8. Personal
Website ini adalah website yang bertujuan untuk
memperkenalkan seseorang ke khalayak ramai melalui
sebuah website dengan tujuan tertentu, website ini biasanya
berisi tentang riwayat hidup seseorang, data diri, karya dan
prestasi seseorang agar orang lain dapat mengenal dan
mengetahui tentangnya.
Itulah tadi jenis-jenis website berdasarkan tujuannya adapun
jenisWEB secara umum adalah sebagai berikut:
a. Website statis yaitu website yang berisi informasi satu
arah. Contohnya adalah website profil instansi,
perusahaan, dan lain-lain.
b. Website Dinamis, yakni website yang informasinya dari
informasi dua arah. Contohnya media social seperti
facebook, twitter dan lain-lain.
Website dinamis yaitu sebuah website yang berisi informasi yang
memungkinkan penggunanya berkomunikasi dua arah atau lebih,
4
Pemrograman Web1
contohnya adalah media sosial seperti intagram, twiter, facebook

dan lain-lain.
1.3 Domain dan jenis-jenis domain
domain adalah alamat dari situs website di internet yang
berfungsi untuk mengetahui dan mengunjungi sebuah website,
seperti halnya rumah kita domain berfungsi sebagai alamat rumah
kita untuk acuan seseorang mengunjungi rumah kita. Istilah yang
umum digunakan adalah URL (Uniform Resource
Locator). Contoh sebuah URL adalah http://www.yahoo.com-
1.3.1 MACAM-MACAM DOMAIN
1. .com : merupakan top level domain yang ditujukan untuk
kebutuhan "commercial".
2. .edu : merupakan domain yang ditujukan untuk
kebutuhan dunia pendidikan (education)
3. .gov : merupakan domain untuk
pemerintahan (government)
4. .mil : merupakan domain untuk kebutuhan angkatan
bersenjata (military)
5. .org : domain untuk organisasi atau lembaga non profit
(Organization).
6. .co.id : Untuk Badan Usaha yang mempunyai badan
hukum sah
7. .ac.id : Untuk Lembaga Pendidikan
8. .go.id : Khusus untuk Lembaga Pemerintahan Republik
Indonesia
5
Pemrograman Web1
9. .mil.id : Khusus untuk Lembaga Militer Republik

Indonesia
10. .or.id : Untuk segala macam organisasi yand tidak
termasuk dalam kategori "ac.id","co.id","go.id","mil.id"
dan lain
11. .war.net.id : untuk industri warung internet di Indonesia
12. .sch.id : khusus untuk Lembaga Pendidikan yang
menyelenggarakan pendidikan seperti SD, SMP dan atau
SMU
13. .web.id : Ditujukan bagi badan usaha, organisasi ataupun
perseorangan yang melakukan kegiatannya di Worl Wide
Web.
1.4 Hosting
Pengertian dari hosting dapat di analogikan sebagai wadah atau
ruangan yang terdapat dalam harddisk untuk tempat menyimpan
data, file-file, gambar, video dan lain sebagainya yang akan
ditampilkan di situs. Besarnya data yang bisa dimasukkan
tergantung dari besarnya hosting yang disewa/dipunyai, semakin
besar hosting semakin besar pula data yang dapat dimasukkan dan
ditampilkan dalam situs. Hosting juga diperoleh dengan
menyewa. Besarnya hosting ditentukan ruangan harddisk dengan
ukuran MB(Mega Byte) atau GB(Giga Byte). Lama penyewaan
hosting ratarata dihitung Per tahun. Penyewaan Hosting
dilakukan Dari perusahaan-perusahaan Penyewa web hosting
Yang banyak dijumpai Baik di Indonesia
6
Pemrograman Web1
Maupun Luar Negri
BAB 2
MENGENAL EDITOR HTML DAN STRUKTUR
HTML
2.1. Jenis-jenis editor

Ada beberapa jenis kode editor untuk HTML, berikut adalah
jenis-jenis kode editor dan deskripsi singkatnya
1. Notepad
Notepad adalah aplikasi bawaan windows yang berfungsi
untuk mencatat segala sesuatu, akan tetapi notepad juga
bisa untuk menjadi teks editor HTML dengan mengganti
type dari text menjadi allfiles tentunya ekstensi
dibelakang nam file harus kita buat secara manual, akan
tetapi notepad sangat sederhana sebagai text editor karena
tidak dilengkapi dengan bantuan ataupun no urut,
7
Pemrograman Web1
sehingga jika untuk kalangan expert notepad tidak cocok

digunakan, akan tetapi untuk pemula sangat dianjurkan
untuk menggunakan notepad sebagai kode editor, karena
bisa meningkatkan daya ingat tentang sintax yang diketik
karena harus menuliskan sepenuhnya tanpa bantuan atau
saran apapun 2. Notepad ++
Boleh dikatakan kehadiran notepad++ ini sedikit
melengkapi kekurangan pada notepad bawaan windows,
untuk mendukung beberapa bahasa pemrograman yang
memiliki fitur utama yang dibutuhkan untuk mengedit
HTML seperti highlight syntax dan juga autocomplete,
notepad++ dibuat untuk sistem operasi windows dan
bersifat gratis dan penggunaannya diatur oleh lisensi
GPL(General Public License), Berdasarkan komponen
pengeditan yang kuat, Scintilla, Notepad ++ ditulis dalam
C ++ dan menggunakan Win32 API dan STL murni yang
memastikan kecepatan eksekusi yang lebih tinggi dan
ukuran program yang lebih kecil. Dengan
mengoptimalkan sebanyak mungkin rutinitas tanpa
kehilangan keramahan pengguna, Notepad ++ berusaha
mengurangi emisi karbon dioksida dunia. Saat
menggunakan daya CPU yang lebih sedikit, PC dapat
memperlambat dan mengurangi konsumsi daya,
menghasilkan pemakaian yang ramah lingkungan
8
Pemrograman Web1
3. Bracket
Brackets adalah editor yang mumpuni, namun dalam hal
penggunaan tetap ringan di semua sistem operasi,
ditambah lagi bracket bersifat gratis yang membuat
bracket disenangi banyak developer web, fitur unggulan
dari editor ini adalah inline editor. Dengan ini Anda bisa
langsung mengedit CSS dari HTML tag yang Anda klik
dengan pintasan Control+E. Selain itu, Brackets memiliki
live preview yang bisa Anda gunakan untuk melihat setiap
perubahan coding yang Anda lakukan.
4. Sublime text
Sublime text adalah text editor yang handal namun tetap
ringan untuk PC. Padahal fitur yang dimilikinya sangat
lengkap. Tersedia untuk semua sistem operasi, editor ini
bisa Anda unduh dengan gratis. Tapi, Anda harus
membeli lisensi untuk dapat terus menggunakanya. Untuk
personal, harga yang ditawarkan sebesar $80. Yang paling
terkenal adalah multiple selection. Fitur ini dapat
melakukam banyak perubahan dalam sekali edit. Selain
itu, beberapa fitur pada sublime text seperti autosave dan
autocompletion,commandpalette, split editing, dan
pilihan kustomisasi yang lengkap.
5. Aptana studio
9
Pemrograman Web1
Aptana Studio bukan hanya teks editor HTML. Aptana

Studio bisa digunakan untuk bahasa pemrograman java,
script, ruby hingga pyton
Aptana Studio bersifat multiplatform. Editor ini memiliki
segudang fitur yang bisa membangun website dengan
mudah. Beberapa fitur unggulan Aptana Studio antara
lain CodeAssist yang menunjukkan tingkat dukungan
dari browser populer. Selain itu, Anda juga akan
dimanjakan dengan Integrasi Git dan kustomisasi lain
yang memudahkan pekerjaan Anda, dan aptana studio
juga bersifat gratis, dan masih banyak lagi text editor yang
lainnya.
2.2. Pengertian Sejarah Html
Hyper Text Markup Language (HTML) adalah bahasa markah
standar guna membuat halaman web, Yang dapat menampilkan
informasi dari suatu web dan dengan format hiperteks sederhana
yang dibuat dengan kode ASCII yang dapat menghasilkan output
tampilan yang terintegrasi.
HTML berawal dari sebuah bahasa sebelumnya yang banyak
digunakan percetakan dan penerbitan yaitu Standart Generalized
Markup Language (SGML), HTML menjadi standar Internet
yang dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C). kolaborasi Caillau TIM dengan
Bernerslee Robert pada saat mereka bekerja di CERN (CERN
adalah lembaga penelitian fisika energi tinggi di Jenewa). pada
10
Pemrograman Web1
tahun 1989 menghasilkan dan menciptakan bahasa HTML yang

kita pakai saat ini. ( Erudeye : 2015 )
Pengembangan HTML dari versi 1 sampai ke versi 4
berlangsung Selama delapan tahun Dari tahun 1991 sampai 1999,
Pada tahun 2000, World Wide Web Consortium (W3C)
merekomendasikan XHTML 1.0. pengembang dipaksa untuk
menulis Sintaks XHTML agar kode terbentuk dengan baik dan
valid.
Pada tahun 2004, W3C memutuskan untuk menutup
perkembangan HTML, mendukung XHTML. Pada tahun 2004,
WHATWG (Web Hypertext Application Technology Working
Group) dibentuk. WHATWG ingin mengembangkan HTML,
konsisten dengan bagaimana web itu digunakan,. Pada 2004 -
2006, WHATWG memperoleh dukungan oleh vendor browser
utama. Pada tahun 2006, W3C mengumumkan bahwa mereka
akan mendukung WHATWG. Pada tahun 2008, HTML5 pertama
rancangan publik dirilis.
Pada tahun 2012, WHATWG dan W3C memutuskan
pemisahan WHATWG ingin mengembangkan HTML sebagai
"Living Standard" . Sebuah standar yang selalu diperbarui dan
diperbaiki. Fitur baru dapat ditambahkan, tapi fungsi lama tidak
dapat dihapus.WHATWG HTML5 Living Standard diterbitkan
pada tahun 2012, dan terus diperbarui. W3C ingin
mengembangkan HTML5 definitif dan standar XHTML.
11
Pemrograman Web1
W3C HTML5 dirilis Oktober 2014 28.W3C HTML5.1 2nd Edition

Rekomendasi dirilis Oktober 2017 3. The W3C HTML5.2
Rekomendasi dirilis 14 Desember 2017.
Berikut tabel lengkap dari awal perkembangan HTML
Tabel 1 perkembangan html
2.3. Struktur HTML

Untuk membuat halaman HTML diperlukan struktur dasar yaitu
Doctype html, tag html, head dan body, berikut adalah penulisan
struktur HTML
<!DOCTYPE html>
<html>
<head>
12
Pemrograman Web1
<title> </title>
</head>
<body>
<p> </p>
</body>
</html>
Penjelasan dari script diatas adalah sebagai berikut:

 <!DOCTYPE html>deklarasi mendefinisikan dokumen
ini menjadi HTML5
 <html>elemen elemen akar halaman HTML
 <head>elemen berisi informasi meta tentang dokumen
 <title>elemen menentukan judul untuk dokumen
 <body>elemen berisi konten halaman yang terlihat
 <p> elemen mendefinisikan sebuah paragraf
2.4. Menampilkan HTML pada Browser

Halaman website dibuat dan dimodifikasi dengan menggunakan
editor HTML Profesional yang sudah dijelaskan di uraian
sebelumnya, namun untuk pemula belajar html disarankan untuk
menggunakan teks editor yang sederhana seperti notepad dengan
menggunakan teks editor sederhana adalah cara yang baik belajar
HTML
Langkah 1 Buka notepad dan tulis script HTML:
Buka notepad lalu tulis script sederhana HTML Seperti dibawah
ini
13
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<title> HTML Pertama saya </title>
</head>
<body>
<p> Halo Dunia, ini adalah HTML pertama saya </p>
</body>
</html>
Langkah 2 : Simpan file

Simpan file dengan nama “index.htm dan ubah type dari
.txt menjadi all files untuk lebih jelas dapat dilihat pada gambar
berikut:
14
Pemrograman Web1
Langkah 3 : Buka file HTML dengan Browser Favorit anda

Setelah itu buka file HTML dengan browser favorit anda dengan
cara klik kanan lalu open with atau klik 2 kali pada file HTML
tersebut dan berikut output dari file HTML yang bernama
“index.htm” yang kita buat :
15
Pemrograman Web1
BAB 3
ELEMEN DAN ATRIBUT HTML
3.1. Elemen HTML

Elemen pada HTML adalah susunan struktur script HTML dari
tag pembuka sampai tag penutup dan konten dari tag tersebut
berada di tengahnya seperti contoh berikut:
16
Pemrograman Web1
<p> Halo Dunia,</p>
Keterangan:
<p> = adalah nama tag untuk menyatakan paragraf dan awal tag
Halo dunia = adalah isi konten dari tag tersebut.
</p> = adalah tag penutup atau akhir dari tag <p>
1. Elemen HTML Bersarang elemen HTML dapat bersarang

(elemen dapat berisi elemen).Semua dokumen HTML
terdiri dari elemen HTML bersarang. Contoh ini berisi
lima elemen HTML:
<!DOCTYPE html>
<html>
<head>
<title> judul Pertama saya </title>
</head>
<body>
<h1> Heading Pertama saya </h1>
<p> Paragraf Pertama saya </p>
</body>
</html>
Output dari script diatas adalah sebagai berikut:
17
Pemrograman Web1
Penjelasan:
 <!DOCTYPE html>deklarasi mendefinisikan dokumen
ini menjadi HTML5.
 Tag pertama adalah tag html yang mendefinisikan seluru
dokumen html
Memiliki tag awal <html> dan tag akhir </html>
 Tag kedua adalah tag head merupakan elemen sebagai
tempat untuk meta data (kumpulan data tentang data),
Meta data dalam file HTML biasanya berisi tentang judul
dokumen, gaya (style), link, script, dan informasi meta
lainnya. Tag yang biasanya masuk dalam elemen
HTML head dan berfungsi sebagai meta
data: <title>, <style>, <meta>, <link>, <script>, dan
<base>
 Memiliki tag awal <head> dan tag akhir </head>
18
Pemrograman Web1
 Tag ketiga adalah body untuk mendefinisikan tubuh

dokumen.
 Memiliki tag awal <body> dan tag akhir </body>
 Unsur dari body ada dua elemen yaitu <h1> dan
<p>
 Tag keempat adalah h1 artinya adalah heading dengan
ukuran no 1 untuk heading
 Memiliki tag awal <h1> dan tag akhir </h1>
 Unsur konten adalah “heading pertama saya”
 Tag kelima adalah p tag yang bertanda paragraf
 Memiliki tag awal <p1> dan tag akhir </p1>
 Unsur konten adalah “paragraf pertama saya”
3.2 Elemen Blok
Elemen blok pada HTML berfungsi untuk membagi halam
html menjadi bagian-bagian terpisah atau menjadi blok-blok
berikutnya, Blok element akan ditampilkan terpisah dari seluruh
tag sebelum dan sesudahnya. Secara default browser akan
menampillkan bagian bagian terpisah seperti sebuah blok dan
selalu dimulai pada baris baru dari tag-tag sebelumnya, berikut
adalah script dari elemen blok
<!DOCTYPE html>
<html>
<head>
<title> Elemen BLock </title>
</head>
<body>
19
Pemrograman Web1
<h1> Belajar elemen block pada html </h1>

<h2> di STMIK Pelita Nusantara </h2> <h3> semua
script di halaman ini adalah elemen blok </h3>
<hr>
<p> apa saja tag elemen blok itu?? Berikut
daftarnya </p>
<ol>
<li> tag div </li>
<li> tag h1- h6 </li>
<li> tag p </li>
<li> tag form </li>
<li> tag table </li>
<li> tag article </li>
<li> dll </li>
</ol>
<p> itulah tadi daftar tag elemen blok sedangkan
yang bukan elemen blok adalah sebagai berikut
</p>
<ul>
<li> tag span </li>
<li> tag a (link) </li>
<li> tag img (image) </li>
<li> tag u, I, b, strong, dll </li>
</ul>
</body>
</html>
Dan berikut adalah gambar dari output script di atas:
20
Pemrograman Web1
Penjelasan :
 Tag kelima adalah h1 – h5 artinya adalah heading dengan
ukuran no 1 sampai no 5 semakin besar maka ukuran
heading tersebut akan semakin kecil untuk heading
 Memiliki tag awal <h1> dan tag akhir </h1>
 Unsur konten adalah “heading pertama saya”
 Tag keenam adalah tag hr fungsi dari tag hr ini yakni
untuk membuat garis horizontal sebagai pemisah antara
paragraf atau pun judul dari tag sebelumnya
 Tag ketujuh adalah p tag yang bertanda paragraf
 Tag kedelapan adalah tag ol, yang singkatan dari order
list yang bertujuan untuk membuat list secara berurutan
dengan angka, huruf, ataupun huruf romawi, dan tag
daftar list pada ol adalah li yang berasal dari singkatan
dari list item, secara default tag ol akan langsung
menampilkan urutan dengan angka, akan teteapi no urut
21
Pemrograman Web1
tidak hanya bertipe angka, ol juga bisa mengurutkan data

berdasarkan huruf ataupun angka romawi dengan tag
sebagai berikut
 <ol type = ”A”> ol dengan type “A” akan
menghasilkan urutan dengan type huruf kapital,
jika ingin menghasilkan urutan dengan dengan
huruf kecil maka ganti type dari <ol type= “A”>
menjadi <ol type = ”a”> atau menjadi<ol type
=”i”> untuk membuat urutan menjadi angka
romawi berikut contoh dari penulisan ol
<ol type =”A”>
<li> HTML <li>
<li> CSS </li>
<li> Java Script </li>
<ol>
 Tag ke sembilan adalah tag ul, ul adalang singkatan dari

unorder list, yang berfungsi untuk membuat daftar list
tetapi tidak memakai angka atau huruf, untuk
mengurutakannya, melainkan memakai simbol atau
bullets, secara default tag ul akan menghasilkan simbol
“disc” atau bulatan hitam, ada beberapa tag pada ul
untuk mengurutkan list data diantaranya adalah: disc,
circle, dan square dengan tag sebagai berikut:
 <ul type= “circle”> ul dengan type “circle” akan
menghasilkan urutan dengan type seperti cincin
dengan lingkarann hitam, jika ingin menghasilkan
22
Pemrograman Web1
urutan dengan dengan simbol kotak maka ganti

type dari <ul type= “circle”> menjadi <ul type =
”square”> berikut contoh dari penulisan ul
<ol type =”square”>
<li> HTML <li>
<li> CSS </li>
<li> Java Script </li>
<ol>
3.3 Elemen inline

Berbeda dengan elemen blok elemen inline adalah tag php
yang tidak mempengaruhi blok-blok atau membuat elemen
menjadi terpisah akan tetapi tetap menjadi satu baris, berikut
adalah script yang mengandung tag inline pada HTML
<!DOCTYPE html>
<html>
<head>
<title>elemen inline</title>
</head>
<body>
<p><strong>belajar elemen inline</strong>
<i>Di STMIK Pelita Nusantara </i> <b>Tag i dan b
adalah termasuk dari elemen inline</b>
<i>Keduanya tag tersebut tidak menjadi blok atau
baris baru</i></p>
</body>
</html>
Berikut adalah output dari script di atas
23
Pemrograman Web1
Penjelasan:
 Tag kelima adalah p yang menandakan sebuah paragraf di

dalam tag p ini ada tag strong, I dan B dan em fungsi dari
tag ini adalah.
 Strong untuk membuat tulisan pada paragraf
menjadi tebal untuk menandakan bahwa tulisan
dari paragraf tersbut penting.
 <i> untuk membuat tulisan pada paragraf menjadi
miring/italic.
 <b> untuk membuat tulisann menjadi tebal/bold.
3.4 Atribut pada HTML
Atribut adalah pelengkap dari sebuah elemen, atribut
memberikan memberikan informasi tambahan tentang elemen
html, seperti halnya seragam atribut adalah baret, lencana dan
sebagainya, atribut pada html selalu di tentukan di tag pembuka
24
Pemrograman Web1
atau tag awal, atribut biasanya berpasangan seperti nama dan nilai
seperti: name = “value”. Berikut adalah contoh-contoh dari
atribut html
3.4.1 Atribut Href dari tag a
Href adalah alamat dari link pada html sedangkan tag untuk
membuat link pada html adalah tag <a>, untuk lebih jelasnya
dapat dilihat pada script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>atribut tautan/link</title>
</head>
<body>
<h2>href atribut</h2>
<p>
Tautan HTML didefinisikan dengan tag a. Alamat
tautan ditentukan dalam atribut href:</p>
<p> berikut adalah link <a
href="https://www.penusa.ac.id"> website</a>
STMIK Pelita Nusantara </p>
</body>
</html>
Output dari script di atas adalah sebagai berikut:
25
Pemrograman Web1
Penjelasan:
 Tag ke enam adalah tag <a> yang berfungsi sebagai tautan
atau link, dan atribut pada tag <a> tersebut adalah href
untuk meletakan alamat tautan berikut adalah contoh
penulisan untuk membuat sebuah tautan/link.
<p> berikut adalah link <a
href="https://www.penusa.ac.id"> website</a>
website STMIK Pelita Nusantara </p>
3.4.2 Atribut src dari tag img

Src adalah atribut dari tag img, tag img digunakan untuk
memasukan sebuah gambar kedalam elemen HTML untuk lebih
jelasnya dapat dilihat pada script dibawah ini
<!dOCTYPE html>
<html>
<head>
<title>atribut src</title>
</head>
<body>
26
Pemrograman Web1
<h2> Atribut src </h2>

<p> Gambar HTML didefinisikan dengan tag img, dan
nama file dan sumber gambar ditentukan dalam
atribut src: </p>
<img src="logo_penusa.png" width="100"
height="100">
<p> logo STMIK Pelita Nusantara </p>
</body>
</html>
Output dari script diatas adalah sebagai berikut:
Penjelasan:
 tag <img> yang berfungsi untuk memasukan sebuah
gambar ke dalam elemen HTML, dan atribut pada tag
<img> tersebut adalah “src” untuk mendefinisikan nama
file dan sumber gambar, dan width dan height untuk
ukuran gambar berikut adalah contoh penulisan untuk
memasukan sebuah gambar.
27
Pemrograman Web1
<img src="logo_penusa.png" width="100"

height="100">
Nb: untuk memasukan sebuah gambar pastikan file gambar satu

folder dengan file html.
3.4.3 Atribut style
Atribut style digunakan untuk membuat gaya dari warna, font,
ukaran, dll. Berikut adalah script untuk membuat style
<!DOCTYPE html>
<html>
<head>
<title>atribut style</title>
</head>
<body>
<h2> Atribut Style</h2>
<p> Atribut style digunakan untuk menentukan gaya
suatu elemen, seperti warna, font, dan ukuran: <p
style="font-size:200%;">paragraf ini berukuran
200%</p>
<p style="font-family:algerian; ">paragraf ini
berjenis font algerian</p>
</body>
</html>
Output dari script di atas adalah sebagai berikut
28
Pemrograman Web1
Penjelasan:
 Atribut style pada tag p yaitu font-size berfungsi untuk
membuat ukuran pada teks
 Atrtibut style pada tag p yaitu color berfungsi untuk
memberi warna pada teks
 Atribut style pada tag p yaitu font-family berfungsi untuk
membuat jenis huruf pada teks.
3.4.4 Atribut align
Atribut align adalah atribut yang berfungsi untuk membuat
format paragraf menjadi rata kiri(left) rata kanan(right) dan rata
kanan kiri(justify), berikut contoh script dari atribut align
<html>
<head>
<title> Latihan </title>
</head>
<body>
<h1 align ="center"> <u> P R O K L A M A S I </u>
</h1>
29
Pemrograman Web1
<hr width= "100%">

<p align= "center"> Kami bangsa Indonesia dengan
ini menjatakan kemerdekaan Indonesia. </p> <p
align= "center"> Hal-hal jang mengenai pemindahan
kekoeasaan d.l.l., diselenggarakan
</p>
<p align="center"> dengan tjara seksama dan dalam
tempo jang sesingkat-singkatnja.</p> <p>
Djakarta, hari 17 boelan 8 tahoen 1945 <p>
<p align= "justify"> <i> Atas nama bangsa
Indonesia. </i> </p>
<p align= "right"> <b> Soekarno/Hatta. </b> </p>
<hr width= "100%">
<h1 align ="center"> <u> <i> STMIK PELITA
NUSANTARA <i> </u> </h1>
</body>
</html>
Berikut adalah hasil dari script diatas:
Dan masih banyak jenis-jenis atribut pada html
30
Pemrograman Web1
3.4 Komentar
Fungsi komentar pada html adalah sebagai penanda ataupun
pengingat fungsi dari tag ataupun memberikan keterangan pada
script yang tidak di eksekusi dan tidak di tampilkan pada browser,
berikut adalah contoh dari komentar pada html
<html>
<head>
<title> membuat komentar </title>
</head>
<body>

<p>hello word </p>
 </body>
</html>
Berikut adalah hasil dari script di atas
31
Pemrograman Web1
BAB 4
WARNA DAN LATAR BELAKANG PADA
HTML
4.1 Warna Latar Belakang

Warna pada html dapat mendukung 140 warna standart warna
HTML yang ditentukan menggunakan nama warna ditentukan
sebelumnya, atau RGB, HEX, HSL, nilai-nilai
RGBA, HSLA,
Berikut adalah contoh warna standar pada HTML dengan CSS:
Berikut contoh script untuk memberi warna latar

belakang(background) pada HTML:
<!DOCTYPE html>
<html>
<head>
<title> Warna HTML </title>
</head>
<body bgcolor="aqua">
<h1 align=center> MACAM-MACAM WARNA DI HTML </h1>
<p style="background-color:Tomato;">Tomato</p>
<p style="background-color:Orange;">Orange</p>
<p style="background-
color:DodgerBlue;">DodgerBlue</p>
color:MediumSeaGreen;">MediumSeaGreen</p> <p
style="background-color:Gray;">Gray</p>
32
Pemrograman Web1
color:SlateBlue;">SlateBlue</p>
<p style="background-color:Violet;">Violet</p>
color:LightGray;">LightGray</p>
</body>
</html>
Berikut output dari script diatas:
Penjelasan:
 Style background-color berfungsi untuk membuat warna
background pada paragraf
 Bisa juga memberikan warna pada HTML dengan kode
hexa
4.2 Latar Belakang dengan warna border
Warna latar belakang pada HTML tidak hanya full tetapi bisa
juga hanya bordernya saja untuk lebih jelasnya dapat dilihat pada
script dibawah ini :
33
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="border: 2px solid Tomato;">Tomato</p>
<p style="border: 3px solid Orange;">Orange</p>
<p style="border: 4px solid
dodgerblue">DodgerBlue</p> <p
style="border: 5px solid
MediumSeaGreen;">MediumSeaGreen</p>
<p style="border: 6px solid Gray;">Gray</p>
SlateBlue;">SlateBlue</p>
<p style="border: 8px solid Violet;">Violet</p>
LightGray;">LightGray</p>
<p style="border: 7px solid #cce7ff;">Memakai
kode hexa</p>
</body>
</html>
Output dari script di atas adalah sebagai:
34
Pemrograman Web1
Penjelasan:
 Style border: 2px berfungsi untuk membuat warna border
background pada paragraf semakin besar px yang
diberikan maka border akan semakin tebal.
 Tidak hanya dengan nama warna tetapi memberi warna
bisa juga menggunakan kode hexa atau nilai RGB.
4.3 Warna Font
Berikut adalah script untuk memberikan warna pada huruf /teks
pada HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<p style="color:pink;">Merah Jambu</p>
<p style="color:red;">Merah</p>
<p style="color:blue;">Biru</p>
<p style="color:purple;">Ungu</p>
<p style="color:Tomato;">Tomato</p>
<p style="color:Orange;">Orange</p>
<p style="color:DodgerBlue;">DodgerBlue</p>
<p
style="color:MediumSeaGreen;">MediumSeaGreen</p>
<p style="color:Gray;">Gray</p>
<p style="color:SlateBlue;">SlateBlue</p>
<p style="color:Violet;">Violet</p>
<p style="color:LightGray;">LightGray</p>
</body>
35
Pemrograman Web1
</html>
Berikut adalah hasil dari script diatas
Penjelasan:
 Style color berfungsi untuk membuat warna pada font/teks
36
Pemrograman Web1
BAB 5
TABEL PADA HTML
5.1 Tabel
Untuk menyajikan informasi yang lebih menarik dan mudah
dimengerti bisa dilakukan dengan menggunakan tabel, tabel
terdiri dari baris dan kolom dimana data tersaji berdasarka field
dan record untuk memudahkan membaca data, untuk lebih
jelasnya dapat dilihat pada gambar berikut.
Berikut contoh script dari pembuatan tabel pada HTML
37
Pemrograman Web1
<html>
<head>
<title> cara membuat table </title>
</head>
<body bgcolor="MediumSeaGreen">
<p align="center"> <img src="logo_penusa.png"
width="10%" height ="20%" align="center"/>
Daftar Nama Mahasiswa STMIK Pelita Nusantara </p>
<table border="1" align ="center">
<tr>
<th> Nama </th>
<th> NIM</th>
<th> Jenis Kelamin </th>
<th> Alamat </th>
<th> Jurusan </th>
</tr>
<tr>
<td> Zaidan Fahri Akbar </td>
<td> 190121017 </td>
<td> Laki-laki</td>
<td> Lubuk Pakam </td>
<td> Teknik Informatika</td>
</tr>
<tr>
<td> Mikhaila Myeisha Hanlim </td>
<td> 190121027 </td>
<td> Perempuan </td>
<td> galang </td>
<td> Teknik Informatika </td>
</tr>
<tr>
<td> Abdillah Azhari </td>
<td> 190121007 </td>
<td> Laki-laki</td>
<td> galang </td>
<td> Teknik Informatika </td>
</tr>
</body>
38
Pemrograman Web1
</table> </html>
Berikut adalah hasil dari script diatas:
Penjelasan:
 Tag table berfungsi untuk mendefinisikan pembuatan
tabel dan atribut border pada tag tabel untuk menentukan
tebal border semakin besar nilai border maka akan
semakin tebal border dan jika border diberi nilai “0” maka
garis pada tabel tidak ada.
 Tag tr adalah singkatan dari table row untuk menentukan
banyaknya jumlah baris, jumlah baris pada tabel di atas
ada sebanyak 4 jadi tr yang dibuat juga sebanyak 4
 Tag td adalah singkatan table yang berfungsi untuk
mengisi data atau membuat kolom pada tabel, pada tabel
di atas ada 5 kolom, oleh karena itu tag td ada sebanyak 5
di setiap tag tr
39
Pemrograman Web1
 Tag th adalah singkatan dari table header pada umumnya

sama seperti td akan tetapi th berfungsi untuk membuat
judul tabel atau nama field tag th ini akan membuat teks
otomatis tebal dan rata tengah.
5.2 Penggabungan Baris Dan Kolom Pada Tabel
Penggabungan baris dan kolom pada tabel biasa disebut
marge cell pada microsoft office, tetapi di HTML untuk membuat
penggabungan kolom dan baris memakai fungsi colspan dan
rowspan, berikut gambar lebih jelas untuk pengertian colspan dan
rowspan
Berikut script colspan untuk gambar di atas

<!Doctypehtml>
<html>
<head>
</head>
<body>
<table border="1" align="center" >
<tr>
<th colspan="2"> Colspan </th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
</body>
</html>
40
Pemrograman Web1
Berikut script colspan untuk gambar di atas

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" align="center" >
<tr>
<td rowspan="2"> Rowspan </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
</tr>
</table>
</body>
</html>
5.3 Penggunaan Colspan dan Rowspan

Berikut adalah contoh penggunaan colspan dan rowspan:
1. Colspan
Berikut adalah script HTML untuk membuat penggunaan
penggabungan kolom atau colspan
<!Doctypehtml>
41
Pemrograman Web1
<html>
<head>
</head>
<body bgcolor="violet">
<p align="center" style="color:dodgerblue;">
<img src="logo_penusa.png" width="10%" height
42
Pemrograman Web1
="20%" align="center"/> Daftar Nama Mahasiswa

<table border="1" align="center" cellpadding="1"
cellspacing="0">
<tr>
<th colspan="5"> Tahun Ajaran 2019/2020 </th>
</tr>
<tr>
<th> Nama </th>
<th> NIM</th>
<th> Alamat </th>
<th> Jurusan </th>
</tr>
<tr>
<td> Zaidan Fahri Akbar
</td>
<td> 190121017 </td>
<td> Laki-laki</td>
<td> Teknik
Informatika</td>
</tr>
<tr>
<td> Mikhaila
Myeisha Hanlim </td>
<td> 190121027 </td>
<td> Galang </td>
<td> Teknik Informatika
</td>
</tr>
<tr>
<td> 190121007 </td>
<td> Laki-laki</td>
<td> Galang </td>
<td> Teknik Informatika
</td>
</tr>
43
Pemrograman Web1
</body>
</table>
</html>
Berikut adalah hasil dari script di atas
44
Pemrograman Web1
Penjelasan:
 Atribut cellpadding pada tag table berfungsi untuk
 Atribut cellspacing berfungsi untuk mengatur lebar spasi
border pada tabel semakin besar angka yang diber akan
semakin memperlebar jarak, pada atribut diatas
cellspacing diberi nilai 0 yang bertujuan menghilangkan
spasi pada garis tabel
 Atribut colspan pada tag th menandakan adanya
penggabungan kolom pada tag th dan value atau nilai dari
atribut colspan adalah “5” yang menandakan
penggabungan kolom sebanyak 5 kolom.
 Atribut colspan pada tag td sama seperti pada tag th
menandakan adanya penggabungan baris pada td dan
value atau nilai dari atribut colspan adalah “5” yang
menandakan penggabungan kolom sebanyak 5 kolom.
45
Pemrograman Web1
1. Rowspan
Berikut adalah script HTML untuk membuat penggunaan
penggabungan Baris atau rowspan
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#ffa64d">
<p align="center" style="color:dodgerblue;">
<img src="logo_penusa.png" width="10%" height
="20%" align="center"/> Daftar Nama Mahasiswa
<table border="1" align="center" cellpadding="1"
cellspacing="0" bgcolor="#ff66a3">
<tr>
</tr>
<tr bgcolor="#6666ff">
<th> Nama </th>
<th> NIM</th>
<th> Alamat </th>
<th> Jurusan </th>
</tr>
<tr>
<td> Zaidan Fahri Akbar </td>
<td> 190121017 </td>
<td> Laki-laki</td>
<td rowspan="3"> Teknik Informatika</td>
</tr>
<tr>
<td> Mikhaila Myeisha Hanlim </td>
<td> 190121027 </td>
<td> Galang </td>
46
Pemrograman Web1
</tr>
<tr>
<td> 190121007 </td>
<td> Laki-laki</td>
<td> Galang </td>
</tr>
<tr>
<td> Zidan Tri Darma </td>
<td> 190121006 </td>
<td> Laki-laki</td>
<td> Galang </td>
<td rowspan="2"> Manajemen Informatika
</td>
</tr>
<tr>
<td> Micel Ameera Hanlim </td>
<td> 190121006 </td>
<td> Perempuan</td>
<td> Galang </td>
</tr>
</body>
</table> </html>
Berikut adalah output dari script di atas
47
Pemrograman Web1
Penjelasan:
 Atribut rowspan pada tag td merupakan fungsi dari
penggabungan baris dalam hal ini nilai atau value dari
atribut rowspan adalah “3” yang menandakan
penggabungan 3 baris yang berisi konten teknik
informatika ada sebanyak 3 orang
 Atribut rowspan pada tag td merupakan fungsi dari
penggabungan baris dalam hal ini nilai atau value dari
atribut rowspan adalah “2” yang menandakan
penggabungan 2 baris yang berisi konten Manajemen
informatika ada sebanyak 2 orang.
 Atribut colspan pada tag th menandakan adanya
penggabungan kolom pada tag th dan value atau nilai dari
atribut colspan adalah “5” yang menandakan
penggabungan kolom sebanyak 5 kolom.
48
Pemrograman Web1
 Dan warna pada tabel menggunakan kode hexa
49
Pemrograman Web1
BAB 6
FORM PADA HTML
6.1 Pengertian Form

Form atau formulir dalam bahasa indonesia biasa dipakai untuk
lembaran isian, begitu juga pada halaman web yang
memungkinkan pengguna untuk memasukkan data, yang
kemudian dapat dikirim kembali ke server web tersebut, fungsi
form di sebuah halaman web sangat banyak, mulai dari form
login, form input barang, pendaftaran, dll berikut adalah struktur
dan atribut pada sebuah form
<form>
Elemen Form
</form>
50
Pemrograman Web1
6.2 Atribut Form

Didalam tag form juga banyak terdiri dari beberapa atribut
dengan fungsi dan jenisnya masing-masing berikut
adalah atribut dari forn
6.3 Jenis Inputan
No Nama atribut 1
Value Funsi atribut
Berfungsi untuk memberikan nilai
2 Readonly awal pada inputan Merupakan nilai
inputan value tidak bisa diubah
(hanya bisa dibaca) berfungsi
untuk menonaktifkan suatu kolom
3 Disabled
inputan atau tombol button
Berfungsi untuk mengatur ukuran
kolom inputan Untuk
4 Size
menentukan panjang maksimum
pada karakter kolom inputan
5 Maxlengh
Untuk menentukan nilai minumum
dan maksimum pada inputan
Untuk Membuat ceklis nilai awal
6 Min & Max
pada combobox dan radio button
Untuk menyembunyikan inputan
7 Checked
hanya di sembunyikan akan tetapi
inputan tetap ada namun tidak di
8 Hidden tampilkan Untuk memberi nama
sebuah inputan
9 Name
Unsur-unsur bentuk berbagai jenis elemen input, seperti

text, password, textarea, select, select multiple, checkbox, radio,
file, submit / button, hidden. Dan ada tipe input yang baru pada
51
Pemrograman Web1
HTML5 yaikni: email, url, number, date, month, week, time,

range color berikut contoh penggunaan jenis inputan
1. Input text dan password
Digunakan untuk inputan berupa teks dan password contohnya
adalah form login, berikut contoh script inputan teks dan
password
<!DOCTYPE html>
<html>
<body>
<h2>HTML Form</h2>
<form>
User Name <br>
<input type="text" name="username">
<br>
Last name:<br> <input type="password"
name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Berikut hasil dari script diatas
52
Pemrograman Web1
Penjelasan:
 Pada awalnya isian akan kosong karena tidak diberi nilai
value untuk nilai pertama maka isilah inputan username
dan password
 Tag input tag type berfungsi untuk menentukan jenis
inputan script diatas terdapat dua tipe yaitu teks yang
menghasilkan inputan teks untuk user name dan password
untuk tipe password yang ketika diisi maka inputan akan
menjadi simbol bullet untuk menutupi teks, dan yang
terakhir adalah inputan bertipe tombol atau submit yang
berfungsi mengirim data
2. Text area dan select dan select multiple
Berikut adalah contoh penggunaan textarea, select dan select
multiple
<!DOCTYPE html>
<html>
53
Pemrograman Web1
<body>
<h2>HTML Form</h2>
<form>
Alamat <br>
<textarea> Jl. Kenangan no 1 Medan </textarea>
<br>
Hobi <br>
<select name="hobi">
<option value="">--Pilih Hobi--</option>
<option value="Bulu Tangkis">1. Bulu
Tangkis</option>
<option value="Sepak Bola" selected>2. Sepak
Bola</option>
<option value="Voli">3. Voli</option>
<option value="Futsal">4. Futsal</option>
<option value="Sepak Takraw">5. Sepak
Takraw</option>
</select>
<br>
Agama:<br>
<select name="agama" multiple>
<option value="">--Pilih Agama--</option>
<option value="Islam">1. Islam</option>
<option value="Kristen Katolik">2. Kristen
Katolik</option>
<option value="Kristen Protestan">3. Kristen
Protestan</option>
<option value="Hindu">4. Hindu </option>
<option value="Budha">5. Budha</option>
</select>
<br><br>
</form>
</body>
</html>
Berikut Ouput dari script di atas:
54
Pemrograman Web1
Penjelasan:
 Tag text area berbeda dengan jenis tag input type dimana
elemen berada ditengah tag pembuka dan tag penutup text
area tidak pada value
 Tag select berfungsi untuk menampilkan banyak pilihan
dan akan tampil pilihan ketika di klik panah sebelah kanan
textbox/ isian hobi, pada kali ini otomatis nilai pertama
sepekbola dikarenakan option sepakbola di beri atribut
selected
 Tag select multiple berfungsi untuk menampilkan banyak
pilihan sama halnya dengan tag select perbedaannya
adalah tag select multiple langsung menampilkan semua
pilihan/option.
3. Checkbox, Radio Button dan File
55
Pemrograman Web1
Ketiga jenis inputan ini menggunakan tag input juga hanya

saja type nya yang diganti berikut contoh penggunaan tag
checkbox, radio button dan file
<!DOCTYPE html>
<html>
<body>
<h2>HTML Form</h2>
<form>
Semester <br>
<input type="checkbox" name="semester" value="1"
checked="checked" />1
<input type="checkbox" name="semester"
value="3"/>3
value="5"/>5
<input type="checkbox" name="semester" value="7"
checked="checked" />7
<br>
<br>
Jenis Kelamin:<br>
<input type="radio" name="jenkel"
value="Pria"/>1. Pria<br />
<input type="radio" name="jenkel" value="Wanita"
checked/>2. Wanita<br />
<br><br>
Unggah Foto:<br>
<input type="file" name="foto">
<br>
<br>
</form>
</body>
</html>
56
Pemrograman Web1
Hasil output dari script di atas adalah sebagai berikut:
4. Inputan baru pada HTML 5

Inputan baru pada HTML 5 yaitu email, url, number, date,
month, week, time, range color, berikut contoh script
penggunaan 8 tipe inputan tersebut
<!DOCTYPE html>
<html>
<body>
<form>
EMAIL <br>
<input type="email" name="email">
<br> <br>
Home Page:<br>
57
Pemrograman Web1
<input type="url" name="url">

<br><br>
Jumlah <br>
<input type="number" name="number">
<br> <br>
Tanggal:<br>
<input type="date" name="date">
<br> <br>
Bulan <br>
<input type="month" name="month">
<br> <br>
MInggu<br>
<input type="week" name="week">
<br> <br>
Jam <br>
<input type="time" name="time">
<br><br>
</form> </body>
</html>
Output dari script di atas adalah sebagai berikut
58
Pemrograman Web1
Penjelasan:
 Pada inputan type email mengharuskan kita untuk
mengisi textbox tersebut dengan format email jika bukan
format email yang kita masukan maka ketika menekan
tombol submit maka textbox tersebut akan memberikan
pesan agar texbox tersebut di isi dengan format email
 agar texbox tersebut di isi dengan format email, begitu
juga untuk format url dan number
 pada type date, month, week dan time ketika di klik maka
akan muncul format sesuai type yang dipilih
5. Input range dan color
Input range digunakan untuk menentukan nilai dalam nilai
rentang atau interval tertentu, sedang input color untuk
memilih memasukan warna berikut contoh script untuk input
range dan color
<!DOCTYPE html>
<html>
<head>
<title> input range dan color </title>
</head>
<body bgcolor="Tomato" >
<form>
masukan range <br>
<input type="range" name="angka" min="0"
max="10"/>
<br> <br>
Pilih dan Masukan Range
<input type="color" name="warna_favorit"
value="#FFBB54" />
59
Pemrograman Web1
<br>
<br>
<input type="submit" name="submit" value="kirim">
</form>
</body>
</html>
Berikut adalah output dari script di atas:
Penjelasan:
 Pada inputan type range akan menghasilkan output seperti
rentang volume yang memiliki atribut min 0 dan max 10
yang menandakan paling kiri nilai 0 (nol) dan kalau
digeser ke kanan semakin tinggi nilai nya sampai akhir
yaitu 10
 Pada inputan type color akan menghasilkan output
pemilihan warna jika di klik.
6. Layout form dengan tabel
60
Pemrograman Web1
Salah satu cara mendesain layout pada HTML adalah

dengan menggunakan tabel, dengan tag tabel kita bisa
merapikan dan meluruskan teks dan gambar dan lain
sebagainya agar border atau garis pada tabel tidak terlihat
bisa kita beri nilai atau value =”0” atau tidak memberi
atribut border pada tabel berikut contoh script untuk
membuat layout form biodata dengan tabel
61
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<title>Layout dengan tabel</title>
</head>
<body bgcolor="tomato">
<h1 align="center" style="color:white;"> Isikan
Biodata Anda </h1>
<table align="center">
<form>
<tr>
<td>Nama</td> <td>:</td><td><input type="text"
name="nama"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir</td>
<td>:</td><td><input type="text" name="tempat">
<input type="date" name="tanggal"></td>
</tr>
<tr>
<td>Jenis Kelamin</td> <td>:</td><td><input
type="radio" name="Jenkel" value="pria"> Pria
<input type="radio" name="jenkel"> wanita </td>
</tr>
<tr>
<td>Program Studi</td> <td>:</td><td>
<select>
<option value="">--Pilih Prodi--</option>
<option value="Teknik Informatika">Teknik
Informatika</option>
<option value="Manajemen
Informatika">Manajemen Informatika</option>
<option
value="Rekaya Perangkat
Lunak">Rekaya Perangkat Lunak</option>
<option value="Teknologi
Informasi">Teknologi Informasi</option>
<option
value="Teknik Rekayasa Jaringan
Komputer">Teknik Rekayasa Jaringan
Komputer</option>
62
Pemrograman Web1
</select> </td>
</tr>
<tr>
<td>Agama</td> <td>:</td><td>
<select>
63
Pemrograman Web1
<option value="">--Pilih Agama--</option>

<option value="Islam">1. Islam</option>
<option value="Kristen Katolik">2. Kristen
Katolik</option>
<option value="Kristen Protestan">3.
Kristen Protestan</option>
<option value="Hindu">4. Hindu </option>
<option value="Budha">5. Budha</option>
</select> </td>
</tr>
<tr>
<td>Alamat</td> <td>:</td><td><textarea
name="alamat"></textarea></td>
</tr>
<tr>
<td>Hobi</td> <td>:</td><td>
<select name="hobi">
<option value="">--Pilih Hobi--</option>
<option value="Bulu Tangkis">1. Bulu
Tangkis</option>
<option value="Sepak Bola">2. Sepak
Bola</option>
<option value="Voli">3. Voli</option>
<option value="Futsal">4. Futsal</option>
<option value="Sepak Takraw">5. Sepak
Takraw</option>
</select></td>
</tr>
<tr><td> Semester</td> <td>:</td><td>
value="1">1
value="3">3
value="5">5
value="7">7</td>
</tr>
</form>
64
Pemrograman Web1
</table>
</body>
</html>
Output dari script di atas adalah sebagai berikut:
Penjelasan:
 Semua elemen pada script di atas sebenarnya berada di
dalam sebuah tabel sehingga setiap tag bisa rapi dan lurus
ke bawah dan ke samping.
NB: pada pembahasan kali ini kita hanya mendesain tampilan
form input saja, untuk proses input akan dibahas selanjutnya
pada Mata Kuliah Pemrograman Web 1 dengan bahasa
pemrograman PHP.
BAB 7
Cascading Style Sheets (CSS)
65
Pemrograman Web1
7.1 Pengertian CSS (Cascading Style Sheets)

Bahasa pemrograman CSS (Cascading Style Sheets) adalah
bahasa pemrograman yang memberikan gaya pada elemen
HTML CSS membuat tampilan web menjadi lebih menarik,
interaktif dan responsive, HTML harus di kombinasikan dengan
CSS, selain membuat gaya pada elemen HTML. CSS juga
mempersingkat pekerjaan pada HTML,
7.2 Struktur CSS
Berikut adalah contoh struktur CSS
 Selector atau pemilih berfungsi untuk memilih elemen mana

yang akan diberi gaya oleh CSS
 Blok Declaration atau deklarasi berisi satu atau lebih deklarasi
dipisahkan oleh titik koma.
66
Pemrograman Web1
 Setiap deklarasi termasuk CSS nama property (properti) dan

value (nilai), yang dipisahkan oleh titik dua.
 Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan
blok deklarasi dikelilingi oleh kurung kurawal.
7.3 CSS Selector
CSS dapat digunakan untuk memilih elemen mana yang akan
diberi style atau gaya berikut adalah penyeleksian sederhana
memilih elemen berdasarkan
1. id Selector CSS
Selector id menggunakan atribut id dari elemen HTML untuk
memilih elemen tertentu. Id dari suatu style adalah unik
dalam halaman, sehingga pemilih id digunakan untuk
memilih nama id untuk satu elemen yang unik! Untuk
memilih elemen dengan id tertentu, dengan cara menulis
hash (#) karakter pagar lalu diikuti oleh nama id, berikut
contoh penulisan CSS id selector
<!DOCTYPE html>
<html>
<head>
<title>id selector CSS</title>
<style> #gaya1
{
text-align: center;
color: blue; font-style:
italic;
}
</style>
</head>
<body>
<p id="gaya1">Paragraf ini diberi id selector
maka akan mengikuti style yang diberi</p>
<p>paragraf ini tidak diberi id maka tidak akan
terpengaruh oleh style</p>
67
Pemrograman Web1
</body>
</html>
Berikut adalah output dari script diatas:
2. Class Selector CSS

Pada umumnya cara kerja class selector sama dengan id
selector hanya berbeda penulisannya saja, cara penulisan class
selector menulis dot atau titik(.) yang diikuti dengan nama
selector CSS, berikut conth penulisan class selector
<!DOCTYPE html>
<html>
<head>
<title>id selector CSS</title>
<style> .gaya1
{
text-align: right;
color: gray; font-style:
italic;
}
</style>
</head>
<body>
<p class="gaya1">Paragraf ini diberi class
selector maka akan mengikuti style yang
diberi</p>
<p>paragraf ini tidak diberi id maka tidak akan
terpengaruh oleh style</p>
</body>
</html>
68
Pemrograman Web1
Berikut adalah output dari script diatas
2. Universal Selector CSS

Selector universal berfungsi untuk memilih semua elemen
pada HTML, cara penulisan universal selector dengan cara
memberi simbol bintang lalu diikuti property CSS, berikut
contoh penulisan script universal selector
<!DOCTYPE html>
<html>
<head>
<title>universal selector CSS</title>
<style> *
{
text-align: center;
color: tomato; font-style:
italic;
}
</style>
</head>
<body>
<h1 align=" center"> Selamat datang di
Universal Selector </h1>
<p> semua elemen terpengaruh style yang
diberi</p>
<h3> ini juga</h3>

<h2> dan ini juga </h2>
</body>
</html>
69
Pemrograman Web1
7.4 Cara menggunakan CSS pada HTML

Cara menggunakan CSS ada 3 jenis cara yaitu CSS Internal,
CSS Eksternal, dan CSS Inline berikut adalah cara-cara untuk
menyisipkan bahasa CSS pada HTML.
1. CSS inline
CSS inline merupakan CSS yang disispkan langsung pada
tag HTML misalnya tag p dengan atribut style seperti
berikut:
<p style="background-color:Tomato;">Tomato</p>
2. CSS Internal
Cara menggunakan CSS internal adalah bahasa CSS
disisipkan dan disatukan pada file HTML, bahasa CSS
diletakan pada bagian tag head pada HTML, berikut adalah
contoh dari penulisan CSS internal
70
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<title> My First CSS</title>
<style> p { color:
red; text-align:
center; font-size:
12px;
}
</style>
</head>
<body>
<h3 align="center"> CSS Pertama Saya </h1>
<p>Halo Dunia</p>
<p>Paragraf ini dibuat dengan CSS</p>
</body>
</html>
Berikut output dari script di atas
Penjelasan:
 Style CSS dibuat didalam tag head.
 Pada script di atas yang diberi gaya oleh CSS adalah tag
p oleh karena itu setiap tag p akan bergaya berwarna
merah, rata tengah dan besar font 12,
71
Pemrograman Web1
 Tag h tidak terpengaruh karena tidak di selector jika ingin

tag h3 bergaya seperti tag p maka tinggal masukan saja ke
dalam selector seperti berikut
<style> P,h3 { color: red; text-align:
center; font-size: 12px;
}
</style>
Maka gaya dan tampilan tag p dan h akan sama
3. CSS Eksternal
Dengan style sheet eksternal, Anda dapat mengubah
tampilan seluruh situs Web dengan mengubah hanya satu
file, Setiap halaman HTML harus menyertakan referensi ke
file style sheet eksternal dalam <link> elemen, di dalam
bagian head. Untuk lebih jelasnya perhatikan cara berikut.
a. Style sheet eksternal dapat ditulis dalam teks editor,
Buatlah sebuah file dengan ekstensi CSS, dan pada file
CSS jangan berisikan tag HTML, misal beri nama file
“style.css” dan tulis script seperti dibawah ini:
72
Pemrograman Web1
body {
background-color: lightblue;
} h1 { color:
navy; margin-left:
20px;
}
p {
font-family: cursive;
text-align: center; font-
style: normal;
}
b. Setelah itu buatlah file HTML dengan nama eksternalcss,

dan pada tag head isikan tag link css “<link
rel="stylesheet" type="text/css" href=style.css">” dengan
nama file ekstensi CSS yang sudah kita buat di langkah
sebelumnya, untuk lebih jelasnya lihat script dibawah ini
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>ini adalah heading</h1>
<p>ini adalah paragraf</p>
</body>
</html>
Setelah itu buka file eksternalcss, dan berikut adalah output dari
kedua file tersebut:
73
Pemrograman Web1
CSS eksternal juga bisa memberikan style dengan memakai id

atau class dengan cara penulisan sama seperti css internal
BAB 8
Macam-macam Selector, Property Dan Value Pada
Cascading Style Sheets (CSS)
8.1 Property pada CSS

Itu tadi adalah beberapa cara menggunakan CSS, dengan
property yang sederhana anda dapat menambahkan property yang
lainnya untuk membuat tampilan web menjadi lebih menarik,
berikut adalah property dan value yang sering digunakan pada
CSS, silahkan dicoba.
property dan values pada background
Property Values Fungsi
Background-color lightblue Untuk memberi warna background
Background-image Url, nama Menyertakan nama dan alamat gambar
Repeat Mengulang gambar dalam halaman
Repeat-y Pengulangan gambar dalam sumbu y
Background-repeat Repeat-x Pengulangan gambar dalam sumbu x
no-Repeat Tidak ada pengulangan gambar, hanya
muncul 1 gambar
74
Pemrograman Web1
property dan values pada font

Property Values Keterangan
font-family Arial; Jenis font arial
small; Ukuran font kecil
medium; Ukuran font menengah
Font-size
large; Ukuran font besar
12px; besar 12 pixel (dapat diganti 12pt)
Font-style Normal; Text Font normal
Italic; Text Font miring/italic
Normal; Ketebalan font normal
Font-weight Bold; Ketebalan Font Tebal/bold
100-900 Ketebalan font dengan nilai dari 100-900
Contoh Property Dan Value pada Text

none; Menampilkan text asli
Underline; Menampilkan Text dengan bergaris bawah
Text-decoration Overline; Menampilkan text dengan bergaris atas
line-through; Menampilkan text dengan tercoret
blink; Menampilkan text dengan berkedip
Text-transform uppercase; Menampilkan textdengan huruf besar
left; Text rata kiri
right; Text rata kanan
Text-align
center; Text rata tengah
justify; Text rata kanan kiri
Selector Pada Link
Selector Fungsi
a:link Keadaan pada saat awal link
Keadaan pada saat link tersorot pointer/ mouse
a:active Keadaan pada saat link saat di klik
a:visited Keadaan pada saatlink setelah dikunjungi
property dan value pada position
75
Pemrograman Web1
Elemen render dalam rangka, seperti yang

Static; muncul dalam aliran dokumen
Unsur diposisikan relatif terhadap posisi

Absolute; pertama (tidak statis)
Unsur diposisikan relatif terhadap jendela

Position Fixed;
browser
elemen diposisikan relatif terhadap posisi
normal, sehingga "left: 20" menambahkan
Relative; 20 pixel ke posisi KIRI elemen
Nilai dari properti posisi diwariskan dari

Inherit;
elemen induk
Property dan Value pada Border

1px solid #000; ukuran border bisa diubah dalam ukuran
2px dotted #ff0000; pixel. Border-style (contoh solid;dotted)
3px double blue; merupakan style pada border setiap
5px groove #3300ff; style tampilan berbeda. Border-color
Border bisa menggunakan warna RGB juga
Desimal. Property border bisa diganti
dengan border-left; border-right; border-
top; border-bottom;
property dan value pada border-

radius
Border-radius 10px; Garis melemgkung disemua sisi dengan
ukuran 10px
border-top- 2em 0.5em; Garis melengkung pada sisi atas dan kiri
leftradius dengan ukuran berbeda
border-topright- 3em 2.5em; Garis melengkung pada sisi atas dan kanan
radius dengan ukuran berbeda
border- 1em 2em; Garis melengkung pada sisi bawah dan
bottomright- kanan dengan ukuran berbeda
radius
border- 2em 1em; Garis melengkung pada sisi bawah dan kiri
bottomleft-radius dengan ukuran berbeda
border- 2em; Garis melengkung pada sisi bawah dan kiri
bottomleft-radius dengan ukuran sama
76
Pemrograman Web1
Margin dan Padding

 Margin adalah kode yang mengatur seleksi batas jarak
luar, seperti misal memberi jarak antara header blog
dengan batas atas, bawah, kanan dan kiri dari kontent
yang ada pada struktur header di sekitarnya.
 Padding adalah kode yang mengatur seleksi batas jarak
dalam seperti memberi jarak pada header dengan batas
tepi header misalnya padding:5px; jadi jarak header
dengan batas tepinya 5px ke dalam.
property dan value pada margin dan padding

margin 10px 5px 0px 5px; atas 5, kanan 5, bawah 0, kiri 10
margin-top 10px; karak atas 10px
margin-right 5px; jarak kanan 5px
margin-bottom 2em; jarak bawah 2em
margin-left 3em; jarak kiri 3en
padding 2em; atas, kanan, kiri dan bawah 2em
property dan value pada display

Berfungsi untuk menghilangkan atau
None; menyembunyikan elemen yang diberi
kode tersebut
Berfungsi untuk memberi blok baru atau
display Block;
baris baru seperti kode
Berfungsi sama seperti kode span, yang
Inline; memberi desain background berbeda
hanya pada elemen tersebut
Itulah tadi tentang selector property dan value dari CSS Latihan:
77
Pemrograman Web1
Buatlah File HTML yang menyertakan semua selector dan

property CSS diatas, minimal masing-masing 1
BAB 9
Pseudo Class Cascading Style Sheets (CSS)
9.1 Pengertian Pseudo Class CSS

Sebuah pseudo-class digunakan untuk mendefinisikan
keadaan khusus dari suatu elemen, sebagai contoh pseudo-class
pada CSS digunakan untuk: gaya elemen ketika pointer mouse
diarahkan mengenai elemen tersebut, gaya elemen link ketika
sudah dikunjungi dan belum dikunjungi(berbeda), dan style
elemen ketika mendapat fokus, berikut semua selector pseudo
class CSS , beserta cara penulisan dan fungsinya
Selector Contoh Fungsi
Penulisan
:active a:active Memimilih tautan aktif
:checked input:checked Memilih setiap elemen <input> yang dicentang
:disabled input:disable d Memilih setiap elemen <input> yang
dinonaktifkan
:empty p:empty Memilih setiap elemen <p> yang tidak memiliki
anak
:enabled input:enabled Memilih setiap elemen <input> yang diaktifkan
:first-child p:first-child Memilih setiap elemen <p> yang merupakan anak
pertama dari induknya
:first-of-type p:first-of-type Memilih setiap elemen <p> yang merupakan
elemen <p> pertama dari induknya
78
Pemrograman Web1
:focus input:focus Memilih elemen <input> yang memiliki fokus

:hover a:hover Memimilih tautan di mouse
:in-range input:inrange Memilih elemen <input> dengan nilai dalam
rentang yang ditentukan
:invalid input:invalid Memimilih semua elemen <input> dengan nilai
yang tidak valid
:lang(language p:lang(it) Memilih setiap elemen <p> dengan nilai atribut
) lang dimulai dengan "it"
:last-child p:last-child Memilih setiap elemen <p> yang merupakan anak
terakhir dari induknya
:last-of-type p:last-of-type Memilih setiap elemen <p> yang merupakan
elemen <p> terakhir dari induknya
:link a:link Memimilih semua tautan yang belum dikunjungi
:not(selector) :not(p) Memilih setiap elemen yang bukan elemen <p>
:nth-child(n) p:nth-child Memilih setiap elemen <p> yang merupakan
anak dari induknya
:nth-child(odd) p:nthchild(odd) Memilih anak yang memiliki urutan ganjil
:nthchild(even) p:nthchild(even) Memilih anak yang memiliki urutan genap
:nth-lastchild(n) p:nth-lastchild Memilih setiap elemen <p> yang merupakan

anak dari induknya, dihitung dari anak terakhir
:nth-last- p:nth-last- Memilih setiap elemen <p> yang merupakan
oftype(n) oftype elemen <p> dari induknya, dihitung dari anak
terakhir
:nth-of-type(n) p:nth-of-type Memilih setiap elemen <p> yang merupakan
elemen <p> dari induknya
:only-of-type p:only-oftype Memilih setiap elemen <p> yang merupakan
satusatunya elemen <p> dari induknya
:only-child p:only-child Memilih setiap elemen <p> yang merupakan
satusatunya anak dari induknya
:optional input:optional Memilih elemen <input> tanpa atribut "wajib"
:out-of-range input:out- Memilih elemen <input> dengan nilai di luar
ofrange rentang yang ditentukan
:read-only input:readonly Memimilih elemen <input> dengan atribut
"hanya baca" yang ditentukan
:read-write input:readwrite Memilih elemen <input> tanpa atribut
"hanyabaca"
:required input:require d Memilih elemen <input> dengan atribut "wajib"
ditentukan
:root root Memilih elemen root dokumen
:target #news:target Memilih elemen #news aktif saat ini (diklik pada
URL yang berisi nama anchor itu)
79
Pemrograman Web1
:valid input:valid Memimilih semua elemen <input> dengan nilai

yang valid
:visited a:visited Memimilih semua tautan yang dikunjungi
Itu adalah pseudo class CSS bukan hanya tag a, p, atau input
seperti tag diatas tetapi bisa untuk tag lain sperti tr, div, dan lain-
lain. Tuliskan script dibawah ini dan amatilah
80
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: cyan;
color: white; padding:
25px; text-align:
center;
}
div:hover {
background-color: blue;
} a:link {
color: red;
} a:visited {
color: green;
} a:hover
{
color: hotpink;
} a:active {
color: blue;
div {
background-color: cyan;
25px; text-align:
center;
}
</style>
</head>
<body>
<p><b><a href="http://penusa.ac.id/">This is a
link</a></b></p>
<p><b> WEBSITE STMIK PELITA NUSANTARA </b> </p>
<div> arahkan mouse kesini </div>

</body>
81
Pemrograman Web1
</html>
Penjelasan:
 Amatilah link dan div dari output diatas,
 Pahami berdasarkan pseudo class CSS yang telah dibuat.
BAB 10
TABEL DAN FORM HTML DENGAN CSS
10.1 Tabel dan form dengan CSS

Tampilan tabel dan form akan lebih menarik jika disisipkan
CSS kedalam elemen HTML,berikut adalah penggunaan CSS
pada tabel dan form 1. Tabel dengan CSS
82
Pemrograman Web1
Berikut adalah script untuk membuat tabel dengan kombinasi

CSS
<!DOCTYPE html>
<html>
<head>
<style> table
{
border-collapse: collapse;
width: 100%;
} th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2c4}
th
{
83
Pemrograman Web1
color: white;
}
</style>
</head>
<body>
<h2>Daftar Mahasiswa STMIK Pelita Nusantara</h2>
<table>
<tr>
<th>Nama</th>
<th>NIM</th>
<th>Jenis Kelamin</th>
<th>Jurusan</th>
</tr>
<tr>
<td>Zaidan Fahri Akbar</td>
<td>190121059</td>
<td>Laki-Laki</td>
<td>Teknik Informatika</td>
</tr>
<tr>
<td>Mikhaila Myeisha Hanlim</td>
<td>190121049</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Micel Ameera Hanlim</td>
<td>190121039</td>
<td>Perempuan</td>
</tr>
<tr>
<td>Zidan Tri Darma</td>
<td>190121029</td>
<td>Laki-Laki</td>
</tr>
</table>
</body>
84
Pemrograman Web1
</html>
85
Pemrograman Web1
Penjelasan:
 Untuk fungsi nth child bisa dilihat di tabel selector pseudo
class CSS di bab 9
2. Form dengan CSS
Berikut adalah script untuk membuat form dengan kombinasi
CSS.
86
Pemrograman Web1
<!DOCTYPE html>
<html> <style>
input[type=text], select {
width: 100%; padding:
12px 20px; margin: 8px
0; display: inline-
block; border: 1px solid
#ccc; border-radius:
4px; box-sizing: border-
box;
}
input[type=submit] {
width: 20%;
background-color: #4CAF50;
14px 20px; margin: 8px 0;
border: none; border-
radius: 4px; cursor:
pointer;
87
Pemrograman Web1
} input[type=submit]:hover
{ background-color:
#45a049;
}
div {
border-radius: 5px; background-
color: #f2f2f2; padding: 20px;
}
</style>
<body>
<h3>Menggunakan CSS untuk memberi sytle pada

form</h3>
<h4 align="center">Form Masukan biodata mahasiswa
STMIK Pelita Nusantara</h4>
<div>
<form >
<label for="name"> Nama</label>
<input type="text" id="name" name="name"
placeholder="Your name..">
<label for="NIM">NIM</label>
<input type="text" id="NIM" name="NIM"
placeholder="Your NIM
<label for="Prody">Program Study</label>

<select id="Prody" name="prody">
<option value="Teknik Informatika">Teknik
Informatika</option>
Informatika">Manajemen Informatika</option>
Informatika">Rekayasa Perangkat Lunak</option>
</select>

</form>
</div>
</body>
88
Pemrograman Web1
</html>
89
Pemrograman Web1
BAB 11
CSS NAVIGATION BAR
11.1 Pengertian Navigation Bar

Navigasi atau pengetahuan tentang posisi dan sebagainya
sangat penting dalam sebuah website untuk memberikan sebuah
informasi yang mudah dimengerti, , berikut contoh menu
navigasi.
dengan CSS menu navigasi akan menjadi lebih menarik dan

interaktif, berikut adalah contoh menu navigasi tanpa CSS,
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
90
Pemrograman Web1
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>
Catatan: Kami menggunakan href = "#" untuk tautan
uji. Di situs web asli, ini adalah URL</p>
</body>
</html>
11.2 Navigasi Vertival dengan CSS

Navigasi Vertical adalah dimana menu navigasi ada di
samping kiri biasanya dan menurun kebawah, Dan berikut adalah
script untuk menu navigasi vertical dengan CSS
91
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<style> ul
{
list-style-type: none;
margin: 0; padding: 0;
width: 200px;
background-color: #f1f1f1;
} li a
{
display: block;
color: #000; padding:
8px 16px; text-
decoration: none;
}
li a.active {
92
Pemrograman Web1
color: white;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>

<p>Dalam contoh ini, kami membuat kelas "aktif"
dengan warna latar belakang hijau dan teks putih.
Kelas ditambahkan ke tautan "HOME"</p>
<p>dan Dalam contoh ini, ketika link navigasi di
sorot maka warna backround akan berganti karena
property hover </p>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
93
Pemrograman Web1
Itu tadi adalah vertical navigation bar, berikut adalah penulisan

horizonal navigation bar dengan CSS:
11.3 Navigasi Horizontal dengan CSS
Navigasi Horizontal biasanya diletakan dibagia atas kiri dan
memanjang ke kanan, berikut adalah penulisan horizonal
navigation bar dengan CSS:
94
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<style> body
{
} ul
{
list-style-type: none;
margin: 0; padding: 0;
overflow: hidden;
} li {
float: left;
border-right:1px solid #bbb;
} li:last-child {
border-right: none;
} li
a {
display: block;
color: white; text-
align: center;
padding: 14px 16px;
text-decoration: none;
} a:hover
{
}
.active {
}
</style>
</head>
95
Pemrograman Web1
<body>
<ul>
<li><a class="active"
href="#home">Home</a></li> <li><a
href="#news">News</a></li>
<li style="float:right"><a
href="#about">About</a></li>
</ul>
<h2>horizontal Navigation Bar</h2>
<p>Dalam contoh ini, kami membuat kelas "aktif"
dengan warna latar belakang hijau dan teks putih.
Kelas ditambahkan ke tautan "HOME"</p> <p>dan
Dalam contoh ini, ketika link navigasi di sorot
maka warna backround akan berganti karena
property hover </p>
</body>
</html>
96
Pemrograman Web1
BAB 12
CSS WEBSITE LAY OUT RESPONSIVE
12.1 Pengertian Lay Out

Lay Out atau tata letak sangat penting bagi sebuah website
untuk membuat website menarik, bersifat responsive dan mudah
dimengerti dan untuk menggunakannya, lay out biasanya terdiri
dari, header, menu navigasi, konten, konten utama, dan footer,
tentunya lay out harus bisa dibuat responsive artinya perbedaan
ukuran pada layar monitor PC, Laptop ataupu Gadget tidak
menjadi masalah, seperti gambar berikut:
97
Pemrograman Web1
Berikut adalah script untuk membuat layout website responsive

dengan CSS:
98
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<style> *
{
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px; background:
#f1f1f5;
}
.header { padding:
30px; text-align:
center; background:
white;
}
.header h1 { font-
size: 50px;
}
/* Style top navigation bar */
.topnav { overflow:
hidden; background-
color: #333;
}
/* Style topnav links */
.topnav a { float:
left; display: block;
color: #f2f2f2; text-
align: center;
padding: 14px 16px;
text-decoration: none;
}
/* perubahan warna pada saat penunjukan pointer
di menu navigasi */ .topnav a:hover {
background-color: #ddd; color: black;
}
99
Pemrograman Web1
100
Pemrograman Web1
/* Buat dua kolom yang tidak sama yang

bersebelahan satu sama lain */
/* kolom kiri */
.leftcolumn {
float: left; width:
75%;
}
/* kolom kanan */
.rightcolumn {
float: left; width:
25%;
background-color: #f1f1f1; padding-
left: 20px;
}
/* gambar palsu */
.fakeimg {
background-color: #F5DEB3;
width: 100%; padding: 20px;
}
/* kartu untuk article */

.card {
background-color: white;
padding: 20px; margin-top:
20px;
}
/* Hapus setelah kolom */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */ .footer
{ padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
101
Pemrograman Web1
/* Tata letak responsif - ketika layar kurang

dari 800px lebar, buat dua kolom saling
bertumpuk bukan di samping satu sama lain */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn { width: 100%;
padding: 0;
}
}
/* Tata letak responsif - saat layar lebarnya
kurang dari 400px, buat tautan navigasi
saling bertumpukan, bukannya bersebelahan */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome To My Website</h1>
<p> Yuda Perwira, M.Kom @pelitanusantara </p>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#" style="float:right">About</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Judul Heading</h2>
<h5>Deskripsi Judul, Dec 24, 2019</h5>
<div class="fakeimg"
style="height:200px;">Image</div>
<p>PROGRAM STUDI</p>
<p> STMIK Pelita Nusantara memiliki 5
102
Pemrograman Web1
Program Studi yaitu

<ul>
<li>Teknik Informatika</li>
103
Pemrograman Web1
<li>Manajemen Informatika</li>
<li>Rekayasa Perangkat Lunak</li>
<li>Teknologi Informasi</li>
<li>Teknik Rekayasa Jaringan
Komputer</li>
</ul>
</p>
</div>
<div class="card">
<h2>Judul Heading</h2>
<h5>Deskripsi Judul, Sep 2, 2017</h5>
<p>Alamat</p>
<p>STMIK Pelita Nusantara berada dijalan
Iskandar Muda no 1 Medan dan kampus 2 berada di
jalan medan simpang timbangan medan</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>Tentang Saya</h2>
<p>Computer Science</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p><ul>
<li>email :yudaperwira@penusa.ac.id </li>
<li>facebook : Yuda Perwira </li>
<li>instagram : yoeda1727 </li>
</ul></p>
</div>
</div>
</div>
104
Pemrograman Web1
<div class="footer">
<h2>@copyrigt yuda@pelitanusantara</h2>
105
Pemrograman Web1
</div>
</body>
</html>
106
BAB 13
BOOTSTRAP
TEORI
Tentang Bootstrap
Bootstrap merupakan framework HTML, CSS,
Javascript populer untuk membangun situs web yang
responsive. RWD (Responsive Web Design) adalah
desain situs yang otomatis akan menyesuaikan diri
agar tampil baik di semua perangkat dari ponsel
sampai dekstop. Bootstrap terdiri dari satu set file
css, javascript, dan jquery. File Bootstrap
Satu set file bootstrap dapat diperoleh di situs

getbootstrap.com yang terdiri dari:
• direktori css: bootstrap.css

• direktori js: bootstrap.js
• direktori font: file-file font glyphicons
107
Ditambah 1 file jquery.js yang dapat diperoleh di
jquery.com. Letakkan file jquery.js ini di direktori js
bersama file bootstrap.js. Letakkan semua direktori
file di atas di direktori htdocs.
Menggunakan Bootstrap
Setelah semua file diperoleh selanjutnya
mentambahkan beberapa perintah di bagian head
dokumen html untuk menggunakannya:
Penjelasan:
• Baris ke-6 mengatur agar lebar laman web

mengikuti lebar layar perangkat (dekstop,
tablet, ponsel) dengan skala awal normal,
artinya tampilan tidak diperbesar atau
sebaliknya. Pengaturan ini membentuk sifat
responsive Bootstrap.
• Baris ke-7 memanggil file css bootstrap.
108
• Baris ke-8 memanggil file jquery. File ini
diperlukan bootstrap untuk menjalankan
berbagai animasi, misalnya animasi silde
jumbotron.
• Baris ke-9 memanggil file javascript bootstrap.
• Baris ke-12 contoh penggunaan kelas
‘container-fluid’ dalam bootstrap agar semua
elemen ‘terbungkus’ mengumpul di satu
wadah.
Grid Bootstrap
Untuk memahami cara kerja bootstrap, Anda perlu
tahu tentang grid bootstrap. Pada dasarnya grid
bootstrap adalah tentang bagaimana bootstrap
membagi-bagi suatu laman web sehingga proses
layout menjadi mudah dan sistematis.
Bootstrap membagi laman web menjadi 12 grid

(daerah vertikal laman web). Setiap grid dapat
digabungkan untuk membuat grid yang lebih besar:
109
Span4 merupakan gabungan dari 4 grid, span8
gabungan 8 grid, dan seterusnya. Saat
menggabungkan grid perlu diingat bahwa setiap baris
harus terdiri dari total 12 grid.
Kelas Grid
Bootstrap memiliki 4 buah kelas grid:
1. xs : grid untuk layout di layar ponsel

2. sm : grid untuk layout di layar tablet
3. md : grid untuk layout di layar dekstop
4. lg : grid untuk layout di layar dekstop
besar
Artinya ketika Anda ingin mengatur grid untuk tampilan

di layar ponsel maka gunakan kelas xs, untuk tablet
gunakan kelas sm, dan seterusnya.
Ketika menggunakan sistem grid bootstrap:
• Baris-baris harus berada didalam sebuah kelas

container atau container-fluid agar obyek-
obyek dalam laman teratur rapi.
• Gunakan kelas row untuk membuat kelompok
kolom
• Tempatkan konten laman dalam kolom
• Setiap kolom memiliki jarak dengan kolom lain
110
Berikut contoh penerapan grid bootstrap:
Dokumen diatas akan membagi laman web menjadi

dua kolom dengan kelas grid
‘col-sm-6’ yang artinya ini pengaturan untuk layar
tablet. Lalu bagaimana dengan layar dekstop, dan
ponsel? Di layar desktop, laman web ini juga akan
terbagi dua kolom karena pengaturan dalam kelas
grid ini bersifat naik keatas, artinya kelas grid md
(desktop) dan lg (desktop besar) akan mengikuti
pengaturan kelas sm.
Sedangkan kelas xs (ponsel) tidak mengikuti aturan
ini.
Form Bootstrap
Ada 3 jenis tampilan form dalam bootstrap:
111
• Form vertical
• Form horisontal
• Form inline
Pengaturan tampilan form dalam bootstrap mengikuti

aturan:
• Gunakan elemen label untuk teks setiap

inputan
• Gunakan kelas form-control untuk semua
elemen input, select, dan textarea
• Bungkus elemen label dan input dengan
elemen div berkelas form-group
• Form vertikal:
<div class="container">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-
control" id="email"
placeholder="Enter email"
name="email">
</div>
<label
for="pwd">Password:</label>
112
<input type="password"
class="form-control" id="pwd"
placeholder="Enter password"
name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"
name="remember"> Remember
me</label>
</div>
<button type="submit" class="btn btn-
default">Submit</button> </form>
</div>
Form inline:
Form inline hanya berlaku untuk layar minimal
768px. Dibawah itu akan ditampilkan seperti form
vertikal.
113
Aturan tambahan: gunakan kelas form-inline pada
elemen form
<h2>Inline form
<small>Hanya berlaku untuk layar
minimal 768px</small>
</h2>
<form class="form-inline"
action="/action_page.php">
<label for="email">Email:</label>
<input type="email"
class="form-control"
id="email" placeholder="Enter
email" name="email">
</div>
<label for="pwd">Password:</label>
placeholder="Enter
password" name="pwd">
</div>
<label><input
type="checkbox"
name="remember">
Remember me</label>
</div>
114
<button type="submit" class="btn
btn-default">Submit</button> </form>
</div>
Form horisontal:
Untuk layar kecil dibawah 768px, form horisontal
akan berubah menjadi form vertikal. Aturan
tambahan:
o Tambahkan kelas
form-horizontal pada
elemen form o
Tambahkan kelas
control-label pada
elemen label <div
class="container">
<form class="form-horizontal">
<label class="control-label col-sm-2"
for="email">Email:</label>
<div class="col-sm-10">
115
<input type="email" class="form-
control" id="email" placeholder="Enter email">
</div>
</div>
<label class="control-label col-sm-2"
for="pwd">Password:</label>
<div class="col-sm-10">
placeholder="Enter password">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<label><input type="checkbox">
Remember me</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-
default">Submit</button>
</div>
</div>
</form>
</div>
116
TUGAS PRAKTIKUM
• Buat direktori dan file-file bootstrap didalam
direktori tugas/aplikasi1/admin dengan susunan
sebagai berikut:
o css
 bootstrap.css o js
 bootstrap.js
 jquery.js o font
 glyphicons-halflings-
regular.eot
regular.svg
regular.ttf
regular.woff
regular.woff2
• Ganti pengaturan tampilan css ke lima dokumen
yang dibuat pada tugas sebelumnya dengan
bootstrap: o dosen (add_dosen.html) o prodi
(add_prodi.html) o mata kuliah (add_matkul.html)
o mengajar (add_mengajar.html) o nilai
117
kehadiran mengajar (add_hadir_ajar.html)
Berikut contoh pengerjaan untuk form mata
• kuliah:
<!DOCTYPE html>
<html>
<head>
<title>Form Tambah Data Mata Kuliah::Sistem
Penilaian IKD Dosen FIK</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h2 class="text-center">Tambah Data Mata
Kuliah</h2>
<hr />
<form class="form-horizontal" action=""
method="post">
<label class="control-label
col-md-4" for="fkode_matkul"> Kode mata
kuliah
</label>
<div class="col-md-3">
<input type="text" class="form-control"
name="fkode_matkul">
</div>
118
</div>
<label class="control-label
col-md-4" for="fnama_matkul">
Nama mata kuliah
</label>
<input type="text" class="form-control"
name="fnama_matkul">
</div>
</div>
<label class="control-label col-
md-4" for="fkode_prodi">
Kode prodi
</label>
<select class="form-
control" name="fkode_prodi">
<option value="">--
Pilih--</option>
<option value="A11">TI-S1</option>
<option
value="A12">SI-S1</option>
<option
value="A14">DKV</option>
<option
value="A15">Ilkom</option>
<option
value="A22">D3-TI</option>
<option
119
value="A24">Broadcasting</option>
<option
value="P31">Pasca
Sarjana</option>
</select>
</div>
</div>
md-4" for="fsks">
SKS
</label>
<select class="form-
control" name="fsks">
<option value="">-
pilih-</option>
<option
value="2">2
<option
value="3">3
<option
value="4">4
<option
value="6">6
</select>
</div>
</div>
md-4" for="fmdt">
120
Semester
</label>
<input type="number"
min="1" max="8"
class="form-control" name="fsmt">
</div>
</div>
md-4" for="fjenis_matkul">
Jenis mata kuliah
</label>
<div class="radio">
<label
for="fjenis_matkul">
<input
type="radio"
name="fjenis_matkul" value="1">Teori
</label>
</div>
<div class="radio">
<label
<input
type="radio"
name="fjenis_matkul" value="2">Praktek
</label>
</div>
121
<div class="radio">
<label
<input
type="radio"
name="fjenis_matkul" value="3">Teori/Praktek
</label>
</div>
</div>
</div>
<div>
<div class="col-md-10 text-
center">
<button type="submit"
class="btn btn-default">
Simpan </button>
</div>
</body>
</html>
122
BAB 14
JAVA SCRIPT
Pengantar
Javascript diperkenalkan pertama kali oleh

Netscape pada tahun 1995. Pada awalnya bahasa
ini dinamakan “LiveScript” yang berfungsi sebagai
bahasa sederhana untuk browser Netscape
Navigator 2. Pada masa itu bahasa ini banyak di
kritik karena kurang aman, pengembangannya yang
terkesan buru buru dan tidak ada pesan kesalahan
yang di tampilkan setiap kali kita membuat
kesalahan pada saat menyusun suatu program.
Kemudian sejalan dengan sedang giatnya kerjasama
antara Netscape dan Sun (pengembang bahasa
pemrograman “Java” ) pada masa itu, maka
Netscape memberikan nama “JavaScript” kepada
bahasa tersebut pada tanggal 4 desember 1995. Pada
saat yang bersamaan Microsoft sendiri mencoba
untuk mengadaptasikan teknologi ini yang mereka
sebut sebagai “Jscript” di browser Internet
Explorer 3.
Javascript adalah bahasa yang berbentuk kumpulan

skrip yang pada fungsinya berjalan pada suatu
dokumen HTML, sepanjang sejarah internet bahasa
ini adalah bahasa skrip pertama untuk web. Bahasa
123
ini adalah bahasa pemrograman untuk memberikan
kemampuan tambahan terhadap bahasa HTML
dengan mengijinkan pengeksekusian perintah
perintah di sisi user, yang artinya di sisi browser
bukan di sisi server web.
Javascript bergantung kepada browser(navigator)

yang memanggil halaman web yang berisi skrip
skrip dari Javascript dan tentu saja terselip di dalam
dokumen HTML. Javascript juga tidak memerlukan
kompilator atau penterjemah khusus untuk
menjalankannya (pada kenyataannya kompilator
Javascript sendiri sudah termasuk di dalam browser
tersebut). Lain halnya dengan bahasa “Java”
(dengan mana JavaScript selalu di banding
bandingkan) yang memerlukan kompilator khusus
untuk menterjemahkannya di sisi user/klien.
1.2 Keperluan Java Script
Untuk mempelajari pemrograman Java Script, ada

dua piranti yang diperlukan, yaitu :
• Teks Editor
Digunakan untuk menuliskan kode-kode
Java Script, teks editor yang dapat
digunakan antara lain notepad dan ultra edit.
• Web Browser
Digunakan untuk menampilkan halaman
web yang mengandung kode-kode Java
Script. Web browser yang digunakan harus
mendukung Java Srcipt. Browser yang
dapat digunakan adalah internet explorer
dan Netscape Navigator.
Penulisan Java Script
124
Kode Java Script dituliskan pada file
HTML.Terdapat dua cara untuk menuliskan kode-
kode Java Script agar dapat ditampilkan pada
halaman HTML, yaitu :
Java script ditulis pada file yang sama
Untuk penulisan dengan cara ini, perintah yang

digunakan adalah
<SCRIPT LANGUANGE =”JavaScript” >program
java script disini</SCRIPT>. Perintah tersebut
biasanya diletakkan diantara Tag
<BODY>…</BODY> Contoh Penulisan :
<HEAD><TITLE>……….</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
kode javascript disini
</SCRIPT>
kode HTML disini
</BODY>
</HTML>
Javascript ditulis pada file terpisah
Kode Javascript bisa juga kita buat dalam file

terpisah dengan tujuan agar dokumen HTML isinya
tidak terlalu panjang. Atribut yang digunakan
adalah
<SCRIPT SRC=”namafile.js”>…</SCRIPT>
Diantara tag <SCRIPT………> dan <SCRIPT> tidak

diperlukan lagi kode Javascriptnya karena sudah
dibuat dalam file erpisah. File yang mengandung kode
Javascript berekstensi .js
Program Pertama Javascript

125
Pada bagian ini kita akan membuat program dengan
menggunakan Javascript.
Program ini akan menampilkan teks “ Belajar
Pemrograman Javascript”
<HTML>
<BODY>
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>
</HTML>
Berikut diberikan beberapa contoh program

sederhana dengan menggunakan
Javascript
<HTML>
<BODY>
<B>Bagian Pertama ini ditulis dengan
HTML!</B>
<P>
126

</SCRIPT>
<P>
<B>Bagian Terakhir dari dokumen HTML, ditulis
setelah Script!</B>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>BElajar Javascript
Yuuuuuu</TITLE>
</HEAD>
<BODY BGCOLOR="gray">

</SCRIPT>
</BODY>
</HTML>
Objek document mempunyai dua metode untuk

menuliskan teks, yaitu write dan writeln. Metode
write digunakan untuk menuliskan teks tanpa ganti
baris, sedangkan metode writeln digunakan untuk
menuliskan teks dengan ganti baris.
Berikut diberikan contoh Program Javascript yang

diletakkan di file lain dan dipanggil melalui suatu
file HTML
File isi.js
document.writeln("<CENTER>");
document.writeln("<HR WIDTH=600
COLOR=Black>");
document.writeln("<H1>UNIVERSITAS KOMPUTER
INDONESIA</H1>");
document.writeln("<H2>FAKULTAS TEKNIK dan
ILMU KOMPUTER<H2>");
128
document.writeln("<H3>JURUSAN TEKNIK
INFORMATIKA<H3>"); document.writeln("<HR
WIDTH=600 COLOR=Black>");
document.writeln("</CENTER>");
<HTML>
<BODY>
<B>Contoh ini menggunakan Javascript yang
diambil dari File lain..</B>
<P>
<SCRIPT language="JavaScript"
SRC="isi.js"></SCRIPT>
</BODY>
</HTML>
Komentar
Sama seperti bahasa pemrograman lain. Javascript
juga menyediakan fasilitas untuk menuliskan
komentar, komentar ini berguna bila nantinya anda
atau orang lain membaca program.
Pemberian komentar dalam Javascript dapat
dilakukan dengan dua cara yaitu dengan menuliskan
komentar setelah tanda garis miring dua kali, contoh
:
//ini komentar
129
atau
/*ini juga komentar */

Variabel Dalam JavaScript
Variabel adalah empat dimana kita menyimpan

nilai-nilai atau informasi-informasi pada JavaScript.
Variabel yang dideklarasikan dapat di isi dengan
nilai apa saja.
Dalam JavaScript pendeklarasian sebuah variabel
sifatnya opsional, artinya anda boleh
mendeklarasikan atau tidak hal tersebut tidak
menjadi masalah. Jika anda memberi nilai pada
variabel, maka dalam JavaScript dianggap bahwa
anda telah mendeklarasikan variabel tersebut.
Aturan penamaan variabel :
• Harus diawalai dengan karakter (huruf atau
baris bawah)
• Tidak boleh menggunakan spasi
• Huruf Kapital dan kecil memiliki arti yang
berbeda
• Tidak boleh menggunakan kata-kata yang
merupakan perintah dalam
JavaScript.
Deklarasi Variabel
Var nama_variabel = nilai
Atau
Nama_variabel = nilai
Contoh :
var nama; Nama = ”Bunga Lestari”
var nama = ” Zaskia Mecca” X = 1990;
var X = 1998; Y =
08170223513 var Y;
130
Tipe Data
Tidak seperti bahasa pemrograman lainnya, JavaScript

tidak memiliki tipe data secara explisit. Hal ini dapat
dilihat dari beberapa contoh variabel diatas. Anda
mendeklarasikan variabel tapi tidak menentukan
tipenya.
Meskipun JavaScript tidak memiliki tipe data secara
explisit. JavaScript mempunyai tipe data implisit.
Terdapat empat macam tipe data implisit yang
dimiliki oleh JavaScript yaitu :
• Numerik, seperti : 0222532531, 1000, 45,
3.146789 dsb
• String, seperti : “Hallo”, “April”, “Jl.
Setiabudi No 17A”, “Cece Kirani” dsb
• Boolean, bernilai true atau false
• Null, variabel yang tidak diinisilisasi
2.3 Tipe Numerik

Pada dasarnya JavaScript hanya mengenal dua
macam tipe numerik, yaitu bilangan bulat (integer)
dan bilangan pecahan(real/float).
Untuk bilangan bulat, kita dapat merepresentasikan
dengan basis desimal, oktal atau heksadesimal.
Contoh :
var A = 100;
var B = 0x2F;
untuk pendeklarasian tipe bilangan real, dapat
menggunakan tanda titik atau notasi ilmiah (notasi
E).
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;
Tipe String
131
Untuk mendeklarasikan tipe string dapat dilakukan
dengan cara menuliskan string diantara tanda petik
tunggal (’) atau tanda petik ganda (”) Contoh : var
str =’Contoh deklarasi string’;
var str1 = ”cara ini juga bisa untuk menulis string”;
Tipe Boolean
Tipe boolean hanya mempunyai nilai True atau

False. Tipe ini biasanya digunakan untuk mengecek
suatu kondisi atau keadaan.
Contoh :
var X = (Y > 90); contoh diatas menunjukkan
bahwa jika Y lebih besar dari 90 maka X akan
bernilai True.
Tipe Null
Tipe Null digunakan untuk merepresentasikan

variabel yang tidak diberi nilai awal
(inisialisasi).
Operator
Operator pada JavaScript terbagi menjadi enam,
yaitu :
• Aritmatika
• Pemberian nilai (Assign)
• Pemanipulasian bit (bitwise)
• Pembanding
• Logika
• String
Operator Aritmatika
Digunakan untuk operan beripe numerik. Ada dua

macam operator aritmatik, yaitu operator numerik
tunggal dan operator aritmatik biner. Perbedaan
132
kedua operator terletak pada jumlah operan yang
harus dioperasikan.
Operator Tunggal/Biner Keterangan

+ Biner Penjumlahan
- Biner Pengurangan
* Biner Perkalian
/ Biner Pembagian
% Biner Modulus
- Tunggal Negasi
++ Tunggal Penambahan dengan satu
-- Tunggal Pengurangan dengan satu
Operator Pemberian Nilai
Digunakan untuk memberikan nilai ke suatu operan

atau mengubah nilai suatu operan.
Operator keterangan Contoh Ekuivalen
= Sama dengan X=Y
+= Ditambah dengan X+=Y X=X+Y
-= Dikurangi dengan X-=Y X=X-Y
*= Dikali dengan X*=Y X=X*Y
/= Dibagi dengan X/=Y X=X/Y
%= Modulus dengan X%=Y X=X%Y
&= Bit AND dengan X&Y X=X&Y
|= Bit OR X|=Y X=X|Y
Operator Manipulasi Bit
133
Operasi ini berhubungan dengan pemanipulasian bit
pada operan bertipe bilangan bulat.
Operator Keterangan
& Bit AND
| Bit OR
^ Bit XOR
~ Bit NOT
<< Geser ke kiri
>> Geser ke Kanan
>>> Geser ke kanan dengan diisi nol
Contoh :
var A = 12; // A
= 1100b var B =
10; // B =
1010b var C = A &
B maka akan
dihasilkan
bilangan seperti
berikut :
1100b
1010b AND
1000b
var D = A >> 1
maka variabel C
akan bernilai
48(0011 0000b)
variabel D akan
bernilai 6 (0110b)
Operator Pembanding
Digunakan untuk membandingkan dua buah

operan. Operan yang dikenal operator ini dapat
bertipe string, numerik, maupun ekspresi lain.
134
Operator Keterangan
== Sama dengan
!= Tidak sama dengan
> Lebih besar
< Lebih kecil
>= Lebih besar atau sama dengan
<= Lebih kecil atau sama dengan
Operator Logika
Digunakan untuk mengoperasikan operan yang

bertipe boolean.
Operator Keterangan
&& Operator logika AND
|| Operator Logika OR
! Operator logika NOT
Contoh :
;
var C = A && B; //menghasilkan false
var D = A || B ; // false
var E = !A; //false
Operator String
Selain operator pembanding, operator string pada

JavaScript juga mengenal satu operator lagi yang
bernama PENGGABUNGAN. Operator ini
digunakan untuk menggabungkan beberapa string
menjadi sebuah string yang lebih panjang.
;
akan menghasilkan ”JavaScript” pada variabel nama
Contoh Program JavaScript

<HTML>
135
<HEAD><TITLE>Operasi
Aritmatika</TITLE></HEAD>
<BODY>
<P><SCRIPT language="JavaScript">

</SCRIPT></P>
</BODY>
</HTML>
136
Memasukkan Data
Untuk memasukkan data dari keyboard dapat

dilakukan dengan menggunakan perintah input.

<HTML>
<HEAD><TITLE>Memasukkan
Bilangan</TITLE></HEAD>
<BODY>
<P><SCRIPT language="JavaScript">
</SCRIPT></P>
<FORM NAME ="fform">
<H1><BR>Memasukkan Data Lewat Keyboard</H1>
<PRE>
Bilangan Pertama :<input type="text"
size="11" name="bilangan1">
Bilangan Kedua :<input type="text"
size="11" name="bilangan2">
</PRE>
<P>
<INPUT TYPE="button" value="Jumlahkan"
onclick="jumlah()">
<INPUT TYPE="reset" value="Ulang">
</FORM>
</BODY>
</HTML>
138
latihan :
• Modifikasi program sebelumnya agar dapat
melakukan operasi pengurangan, perkalian
dan pembagian !!
139
3.1 Objek Untuk memasukkan Data
Terdapat beberapa objek yang dapat digunakan
untuk memeasukkan data. Objekobjek tersebut
biasanya terdapat dalam suatu form. Adapun objek-
objek tersebut meliputi Objek Text, Objek Radio,
Objek Checkbox, Objek Textarea, dan Objek
Select.
3.2 Objek Text

Untuk menginputkan data kita dapat menggunakan
komponen/objek text. Contoh penggunaannya dapat
kita lihat pada contoh berikut :

<html>
<head><title>Latihan Dengan Objek
Text</title></head>
<body>
<script languange ="JavaScript">

140
</script>
<form name ="fform">
<H1> Memasukkan Data Dengan Objek
Teks</H1><hr>
<PRE>
Nama Anda : <input type="text" size="11"
name="nama">
Alamat : <input type="text" size="25"
name="alamat">
</PRE>
<BR>
<input type="button" value="kirim"
onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output</H3>
<PRE>
Jadi Nama Anda adalah :<input type="text"
size="11" name="onama">
Alamat Anda di :<input type="text"
size="25" name="oalamat">
</form>
</body>
</html>
141
Objek Radio
Objek radio adalah komponen yang digunakan

untuk melakukan suatu pemilihan data. Karena
selalu berupa Array , untuk mengakses satu tombol
radio digunakan radio[indeks]. Disamping itu objek
radio juga mempunyai nili True jika dipilih dan
False jika tidak. Untuk memilih suatu objek radio
menggunakan properti Checked.

<html>
Radio</title></head>
<body>

</script>
<form>
Radio</H1><hr>
<p><input type="radio" value="wanita"
name="wanita">Wanita</p>
<hr>
<p><input
type="butt
on"
value="CON
FIRM"
onclick="r
142
adio_box(t
his.form)"
> <input
type="rese
t"
value="RES
ET"></p>
</form>
</body>
</html
Objek Checkbox
Objek checkbox menyimpan informasi tentang

elemen form yang berupa kotak cek.
Penggunaannya hampir sama seperti objek radio.

<html>
Checkbox</title></head>
<body>

</script>
<form>
Checkbox</H1><hr>
<p>Hobby anda :
<input type="checkbox" value="ON"
name="bola">Nonton Sepak Bola
<input type="checkbox" value="ON"
name="tv">Nonton televisi</p>
<hr>
<p><input
type="butt
on"
value="CON
FIRM"
onclick="r
adio_box(t
his.form)"
> <input
type="rese
t"
value="RES
ET"></p>
</form>
</body>
</html>
144
Objek TextArea
Objek textarea menyimpan informasi tentang

elemen form yang berupa kotak teks dengan banyak
baris.

<html>
TextArea</title></head>
<body>

</script>
TextArea</H1><hr>
<h3>Keterangan :<h3><br>
145
<textarea name="Ket" rows="3"
cols="30"></textarea>
<BR><BR>
<input type="button" value="kirim"
onclick="tekan()">
<H3>Output Keterangan :</H3>
<textarea name="Oket" rows="3"
cols="30"></textarea>
</form>
</body>
</html>
Objek Select
Objek Select menyimpan informasi tentang elemen

form yang berupa kotak daftar. Objek select
berguna apabila di dalam form terdapat banyak
pilihan yang telas mempunyai nilai tertentu.
<html>
Select</title></head>
<body>

</script>
<H1> Penggunaan Objek Select</H1><hr>
<h3>Masukan :<h3>
Jurusan Di UNIKOM :<select name="Jurusan"
Size="1">
<option value ="Teknik
Informatika"> Teknik
Informatika </option>
<option value ="Manajemen
Informatika"> Manajemen
Informatika </option>
Komputer"> Teknik Komputer
</option>
Industri"> Teknik Industri </option>
Elektro"> Teknik Elektro
</option>
<option value ="Teknik Sipil">
Teknik Sipil </option>
Arsitektur"> Teknik Arsitektur
</option>
Perencanaan Wil. Kota ">
Perencanaan Wil. Kota </option>
</select>
<p><input type="button" value="kirim"
onclick="tekan()">
<H3>Output jurusan :</H3>
<input type="text" name="Ojurusan"
size="30">
</form>
</body>
147
</html>
Latihan :
Buatlah halaman seperti berikut, yang mencakup
semua materi yang terdapat pada modul ini.
1. Input berupa : NIM, NAMA, JENIS
KELAMIN, AGAMA, STATUS,
JURUSAN, KOMENTAR. (SESUAIKAN
OBJEK YANG DIPAKAI)
Gambar 1
2. Proses terjadi ditombol KIRIM
3. Output : lihat pada gambar 2
4. Isi dengan NIM, NAMA ANDA
5. Tugas individu, dikumpulkan minggu ke 5,
dalam bentuk print out KODE HTMLnya
serta Tampilannya
148
gambar 1
gambar 2
149
Percabangan
Percabangan
Untuk membuat suatu halaman yang dinamis dan
interaktif, perancang halaman Web membutuhkan
perintah-perintah yang dapat mengatur aliran dari
informasi. Berdasarkan hasil komputasi yang telah
dilakukan, JavaScript akan membuat keputusan jalur
mana yang akan dieksekusi.
Pada dasarnya dalam JavaScript terdapat dua
macam pernyataan percabangan yaitu if..else dan
switch
4.2 If..Else
Pernyataan ini digunakan untuk menguji sebuah
kondisi dan kemudian mengeksekusi pernyataan
tertentu bila kondisi tersebut terpenuhi, dan
mengeksekusi pernyataan lain bila kondisi tersebut
tidak terpenuhi.
if (kondisi)
{
//pernyataan1 dieksekusi
//bila kondisi terpenuhi
}
//bila kodisi tidak terpenuhi
}
kondisi adalah ekspresi JavaScript yang mana

hasil evaluasinya memiliki nilai Boolean true atau
false
150
Untuk kasus yang melibatkan lebih banyak kondisi,
maka kita dapat meletakkan pernyataan if lain
setelah else
if (kondisi1)
{
//bila kondisi1 terpenuhi
}
else if (kondisi2)
{
//bila kodisi1 tidak terpenuhi
{
//bila kodisi2 tidak terpenuhi
}

<HTML>
<HEAD><TITLE>Percabangan IF-
ELSE</TITLE></HEAD>
<BODY>
</SCRIPT>
<H2><BR>Bilangan Negatif, Nol, Atau Positif
???</H2>
Masukkan Bilangan :<input type="text"
size="11" name="bilangan"> <P>
<INPUT TYPE="button" value="Tanya"
onclick="tanyabilangan()">
<INPUT TYPE="reset" value="Ulang"> </p>
</FORM>
</BODY>
</HTML>
152
4.3 Contoh Kasus
Perusahaan Travel ”Bintang Abadi” mempunyai
armada dengan tujuan :
Tujuan Harga Tiket
Jakarta 100000
Cirebon 150000
Tasikmalaya 200000
Apabila seorang pemesan sudah menjadi

anggota/member Travel Bintang Abadi maka akan
mendapatkan diskon 10 %.
Subtotal : Harga tiket X
Jumlah tiket
Diskon : 0.10 X Subtotal
Total : Subtotal - Diskon
Buat Program dengan menggunakan Javascript
untuk menyelesaikan masalah tersebut. Dengan
ketentuan sebagai berikut :
Input : Nama pemesan Output : Harga Tiket

Tujuan Sub Total
Jumlah Tiket Diskon
Member Total Bayar

<HTML>
<HEAD><TITLE>Percabangan IF-ELSE
2</TITLE></HEAD>
<BODY>
</SCRIPT>
<table border="1" align="center"width="70%">
<tr>
<td width="100%" colspan="2"><H2
ALIGN="center">Travel Bintang
Abadi</H2></td>
</tr>
<tr>
<td width="50%"><PRE>
Nama :<input type="text" size="20"
name="inama">
Tujuan :<select name="itujuan" size=1>
<option
value="Jakarta">Jakarta</option>
<option
value="Cirebon">Cirebon</option>
<option
value="Tasikmalaya">Tasikmalaya</option>
</select>
Jumlah Tiket :<input type="text" size="11"
name="ijumlah">
Member :<input type="checkbox"
name="imember">Ya</td></pre>
<td width="50%"><pre>
Harga Tiket :<input type="text" size="10"
name="otiket">
Sub Total :<input type="text" size="10"
name="osub">
Diskon :<input type="text" size="10"
name="odiskon">
Total Bayar :<input type="text" size="10"
name="ototal"></td><pre>
</tr>
<tr>
<td width="100%" colspan="2">
<center>
155
<INPUT TYPE="button" value="Hitung"
onclick="hitungtotal()">
<INPUT TYPE="reset" value="Ulang">
</center></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
156
157
4.4 Percabangan Majemuk
Percabangan majemuk adalah suatu percabangan
yang dapat melibatkan lebih dari 1 kondisi di dalam
percabangannya. Biasanya percabangan sepert ini
menggunakan operator tambahan seperti AND, OR
dan sebagainya.

<HTML>
<HEAD><TITLE>Percabangan IF-ELSE
3</TITLE></HEAD>
<BODY>
</SCRIPT>
<table border="1"
width="100%"
ALIGN="center" > <tr>
<td width="100%" colspan="4"><H2
ALIGN="center">Menghitung Indeks
Prestasi</H2></td>
</tr>
<tr>
<td width="25%">Quis (10%) :<input
type="text" size="10" name="iquis"> </td>
<td width="25%">Tugas (20%):<input
type="text" size="10" name="itugas"> </td>
<td width="25%">UTS (30%):<input
type="text" size="10" name="iuts"> </td>
<td width="25%">UAS (40%) :<input
type="text" size="10" name="iuas"> </td>
</tr>
<tr>
<td width="100%" colspan="4"><P
Align="center">
onclick="hitungip()">
<INPUT TYPE="reset" value="Ulang"> </p></td>
</tr>
<tr>
159
<td width="100%" colspan="4"
align="center">
Indeks Prestasi :<input type="text"
size="5" name="oip">
Keterangan :<input type="text"
size="25" name="oket"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
160
4.5 Switch
Selain menggunakan if..else, percabangan juga
dapat ditangani dengan perintah switch. Dengn kata
lain pernyataan switch digunakan untuk
menyederhanakan pernyataan if..else yang terlalu
banyak.

<HTML>
<HEAD><TITLE>Percabangan
Switch</TITLE></HEAD>
<BODY>
</SCRIPT>
<H2>Penggunaan Percabangan Switch</H2><HR>
<PRE>
Masukkan Nomor Bulan [1-12] :<input
type="text" size="2" name="ibulan">
onclick="tanyabulan()"><INPUT TYPE="reset"
value="Ulang">
</PRE>
</FORM>
</BODY>
</HTML>
162
163
Latihan :
Buatlah halaman seperti berikut, yang mencakup
semua materi yang terdapat pada modul ini.
Perusahaan Travel Bintang Abadi memiliki armada
dengan tujuan Jakarta, Solo dan Surabaya. Setiap
tujuan memiliki kelas Eksekutif, Bisnis dan
Ekonomi.
Eksekutif Bisnis Ekonomi

Jakarta 70000 40000 10000
Solo 80000 50000 20000
Surabaya 90000 60000 30000
Diskon 10% diberikan apabila pemesan tiket
merupakan anggota Travel Bintang Abadi.
Input : Nama Pemesan, Tujuan, Kelas, Banyak
Tiket dan Status Member/Bukan Output :
Harga Tiket, Subtotal, Diskon dan Total Bayar
Tampilan :
164
5.1 Perulangan
Untuk mengulang kejadian beberapa kali maka kita
membutuhkan proses perulangan. Pada JavaScript
dikenal beberapa metode/cara perulangan.
5.2 Perulangan For

Digunakan untuk mengeksekusi pernyataan-
pernyataan beberapa kali. Perulangan For paling
sering dipakai, jika anda sudah tahu akhir dari
perulangan tersebut. . Perintah for mengulang suatu
loop sampai kondisi menghasilkan evaluasi true
atau loop keluar dengan perintah break .
165
Contoh :
for (nilai awal;kondisi;penambahan)

{
ulang pernyataan ini;
}
Contoh dalam program :
For(x=1;x<=10;x++)
{
document.writeln(”Belajar JavaScript
Yuuuuu..”);
}

<HTML>
<HEAD><TITLE>Latihan Perulangan
I</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript">

Kuadrat: " + sq + "<BR>");
document.writeln("</PRE>");
}
document.writeln("--------------------------
----------------------");
// akhir dari penyembunyian -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
166
5.3 Perulangan While
Perulangan lain yang dapat digunakan adalah
dengan menggunakan perintah While. Perintah
while digunakan untuk perulangan yang tidak
diketahui berapa kali proses perulangannya.
Perintah while terus mengulangi loop selama
kondisi memiliki nilai true. Syntax untuk perintah
while adalah sebagai berikut :
while (kondisi)
167
{
ulang
perny
ataan
ini;
}

<HTML>
<HEAD><TITLE>Latihan Perulangan
II</TITLE></HEAD>

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
168
5.4 Perulangan Do While
Perulangan ini hampir sama seperti while, digunakan
apabila kita belum tahu berapa kali perulangan harus
dilakukan. Bedanya pernyataan do..while
pengujiannya dilakukan di akhir pernyataan.
Do
{
}
while (kondisi);
169
<HTML>
<HEAD><TITLE>Latihan Perulangan III(Do-
While)</TITLE></HEAD>
<BODY>


</SCRIPT>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE="Password"
ONCLICK="pass()">
170
</FORM>
</BODY>
</HTML>
Adapun hasil yang diperoleh adalah sebagai berikut

:
1. Tampilan awal
2. Prompt password
3. Alert apabila terjadi kesalahan password

171
4. Alert apabila telah terjadi 3 kali kesalahan
5. Apabila password benar
6. Halaman utama
172
Latihan :
1. Buat program untuk menentukan faktorial
dan jumlah deret sampai ke N.
173
2. Buat program untuk menghitung saldo akhir
dari suatu tabungan dengan bunga dan jangka waktu
tertentu :
Input :
Saldo : 100000
Bunga : 10
Waktu : 3
Ketika user menekan tombol Hitung maka akan
muncul hasil seperti berikut :
Saldo Bulan 1 = Rp. 110000
174

Modul Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web1

Program Studi Bisnis Digital

1.1 Pengertian dan Latar Belakang Website

di tempat masing-masing mereka bekerja dengan mudah. Hal

memecahkan masalah anggota yang bertanya di website

contohnya adalah media sosial seperti intagram, twiter, facebook

9. .mil.id : Khusus untuk Lembaga Militer Republik

Maupun Luar Negri

2.1. Jenis-jenis editor

sehingga jika untuk kalangan expert notepad tidak cocok

Aptana Studio bukan hanya teks editor HTML. Aptana

tahun 1989 menghasilkan dan menciptakan bahasa HTML yang

W3C HTML5 dirilis Oktober 2014 28.W3C HTML5.1 2nd Edition

2.3. Struktur HTML

Penjelasan dari script diatas adalah sebagai berikut:

2.4. Menampilkan HTML pada Browser

Langkah 2 : Simpan file

Langkah 3 : Buka file HTML dengan Browser Favorit anda

3.1. Elemen HTML

<p> Halo Dunia,</p>

1. Elemen HTML Bersarang elemen HTML dapat bersarang

Output dari script diatas adalah sebagai berikut:

 Tag ketiga adalah body untuk mendefinisikan tubuh

<h1> Belajar elemen block pada html </h1>

Dan berikut adalah gambar dari output script di atas:

tidak hanya bertipe angka, ol juga bisa mengurutkan data

 Tag ke sembilan adalah tag ul, ul adalang singkatan dari

urutan dengan dengan simbol kotak maka ganti

3.3 Elemen inline

Berikut adalah output dari script di atas

 Tag kelima adalah p yang menandakan sebuah paragraf di

Output dari script di atas adalah sebagai berikut:

3.4.2 Atribut src dari tag img

<h2> Atribut src </h2>

Output dari script diatas adalah sebagai berikut:

<img src="logo_penusa.png" width="100"

Nb: untuk memasukan sebuah gambar pastikan file gambar satu

Output dari script di atas adalah sebagai berikut

<hr width= "100%">

Berikut adalah hasil dari script diatas:

Dan masih banyak jenis-jenis atribut pada html

Berikut adalah hasil dari script di atas

4.1 Warna Latar Belakang

Berikut contoh script untuk memberi warna latar

Berikut output dari script diatas:

Output dari script di atas adalah sebagai:

Berikut adalah hasil dari script diatas

Berikut contoh script dari pembuatan tabel pada HTML

Berikut adalah hasil dari script diatas:

 Tag th adalah singkatan dari table header pada umumnya

Berikut script colspan untuk gambar di atas

Berikut script colspan untuk gambar di atas

5.3 Penggunaan Colspan dan Rowspan

="20%" align="center"/> Daftar Nama Mahasiswa

Berikut adalah hasil dari script di atas

Berikut adalah output dari script di atas

 Dan warna pada tabel menggunakan kode hexa

6.1 Pengertian Form

6.2 Atribut Form

Unsur-unsur bentuk berbagai jenis elemen input, seperti

HTML5 yaikni: email, url, number, date, month, week, time,

Berikut hasil dari script diatas

Berikut Ouput dari script di atas:

Ketiga jenis inputan ini menggunakan tag input juga hanya