Materi Pemrograman-Web-1

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
ii
Pemrograman Web1
5.2 Penggabungan Baris Dan Kolom Pada Tabel...............40

5.3 Penggunaan Colspan dan Rowspan...............................41
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
iv
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
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
1
Pemrograman Web1
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. 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
2
Pemrograman Web1
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
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
3
Pemrograman Web1
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, 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
4
Pemrograman Web1
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
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
5
Pemrograman Web1
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
Maupun Luar Negri
BAB 2
MENGENAL EDITOR HTML DAN STRUKTUR
HTML
6
Pemrograman Web1
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, 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
7
Pemrograman Web1
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
3. Bracket
Brackets adalah editor yang mumpuni, namun dalam hal
penggunaan tetap ringan di semua sistem operasi,
8
Pemrograman Web1
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
Aptana Studio bukan hanya teks editor HTML. Aptana
Studio bisa digunakan untuk bahasa pemrograman java,
script, ruby hingga pyton
9
Pemrograman Web1
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
tahun 1989 menghasilkan dan menciptakan bahasa HTML yang
kita pakai saat ini. ( Erudeye : 2015 )
10
Pemrograman Web1
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.
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.
11
Pemrograman Web1
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>
<title> </title>
</head>
<body>
<p> </p>
12
Pemrograman Web1
</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
<!DOCTYPE html>
<html>
13
Pemrograman Web1
<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:
<p> Halo Dunia,</p>
16
Pemrograman Web1
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>
19
Pemrograman Web1
<body>
<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
21
Pemrograman Web1
menampilkan urutan dengan angka, akan teteapi no urut

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
22
Pemrograman Web1
dengan lingkarann hitam, jika ingin

menghasilkan 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
atau tag awal, atribut biasanya berpasangan seperti nama dan
24
Pemrograman Web1
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>
26
Pemrograman Web1
<body>
<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
27
Pemrograman Web1
ukuran gambar berikut adalah contoh penulisan untuk

memasukan sebuah gambar.
<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>
color:SlateBlue;">SlateBlue</p>
32
Pemrograman Web1
<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 >
35
Pemrograman Web1

<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>
</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>
38
Pemrograman Web1
</body>
</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
39
Pemrograman Web1
di atas ada 5 kolom, oleh karena itu tag td ada sebanyak

5 di setiap tag tr
 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>
40
Pemrograman Web1
</tr>
</table>
</body>
</html>
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
41
Pemrograman Web1
Berikut adalah script HTML untuk membuat penggunaan

penggabungan kolom atau colspan
<!Doctypehtml>
<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> 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
43
Pemrograman Web1
</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>
</table>
</html>
44
Pemrograman Web1
Berikut adalah hasil dari script di atas
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
45
Pemrograman Web1
value atau nilai dari atribut colspan adalah “5” yang

menandakan penggabungan kolom sebanyak 5 kolom.
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> 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 rowspan="3"> Teknik Informatika</td>
</tr>
46
Pemrograman Web1
<tr>
<td> Mikhaila Myeisha Hanlim </td>
<td> 190121027 </td>
<td> Perempuan </td>
<td> Galang </td>
</tr>
<tr>
<td> Abdillah Azhari </td>
<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
48
Pemrograman Web1
atribut colspan adalah “5” yang menandakan

penggabungan kolom sebanyak 5 kolom.
 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
Elemen Form
</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 9 Name
No Nama atribut 1 Value
6.3 Jenis Inputan
2 Readonly Funsi atribut
Berfungsi untuk memberikan nilai awal pada
inputan Merupakan nilai inputan value tidak
3 Disabled bisa diubah (hanya bisa dibaca) berfungsi untuk
menonaktifkan suatu kolom inputan atau tombol
button Berfungsi untuk mengatur ukuran kolom
4 Size inputan Untuk menentukan panjang maksimum
pada karakter kolom inputan Untuk
5 Maxlengh menentukan nilai minumum dan maksimum
pada inputan Untuk Membuat ceklis nilai awal
pada combobox dan radio button Untuk
menyembunyikan inputan hanya di
6 Min & Max
sembunyikan akan tetapi inputan tetap ada
namun tidak di tampilkan Untuk memberi nama
7 Checked
sebuah inputan
8 Hidden
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
Ketiga jenis inputan ini menggunakan tag input juga hanya
saja type nya yang diganti berikut contoh penggunaan tag
checkbox, radio button dan file
55
Pemrograman Web1
<!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 <input type="checkbox"
name="semester" 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>
Hasil output dari script di atas adalah sebagai berikut:
56
Pemrograman Web1
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>
<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">
57
Pemrograman Web1
<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
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
58
Pemrograman Web1
 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" />
<br>
<br>
<input type="submit" name="submit" value="kirim">
</form>
</body>
</html>
Berikut adalah output dari script di atas:
59
Pemrograman Web1
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
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
60
Pemrograman Web1
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
62
Pemrograman Web1
value="Teknologi
Informasi">Teknologi Informasi</option>
<option value="Teknik Rekayasa
Jaringan Komputer">Teknik Rekayasa
Jaringan
Komputer</option>
63
Pemrograman Web1
</select> </td>
</tr>
<tr>
<td>Agama</td> <td>:</td><td>
<select>
64
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 <input type="checkbox"
name="semester" value="5">5
65
Pemrograman Web1
value="7">7</td>
</tr>
</form>
</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.
66
Pemrograman Web1
BAB 7
Cascading Style Sheets (CSS)
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
67
Pemrograman Web1
 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.
 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
68
Pemrograman Web1
<!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>
</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
69
Pemrograman Web1
<!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>
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
70
Pemrograman Web1
<!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>
71
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
72
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,
73
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:
74
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:
75
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
Background-repeat Repeat Mengulang gambar dalam halaman
Repeat-y Pengulangan gambar dalam sumbu y
76
Pemrograman Web1
Repeat-x Pengulangan gambar dalam sumbu x

no-Repeat Tidak ada pengulangan gambar, hanya
muncul 1 gambar
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
77
Pemrograman Web1
a:visited Keadaan pada saatlink setelah dikunjungi
property dan value pada n

positio
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
Fixed;
Position browser
elemen diposisikan relatif terhadap posisi
normal, sehingga "left: 20" menambahkan 20
Relative;
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;
bordertop; border-bottom;
property dan value pada borderradius

Border-radius 10px; Garis melemgkung disemua sisi
dengan ukuran 10px
border-topleftradius 2em 0.5em; Garis melengkung pada sisi atas dan
kiri dengan ukuran berbeda
border-toprightradius 3em 2.5em; Garis melengkung pada sisi atas dan
78
Pemrograman Web1
kanan dengan ukuran berbeda

borderbottomrightradius 1em 2em; Garis melengkung pada sisi bawah dan
kanan dengan ukuran berbeda
border- 2em 1em; Garis melengkung pada sisi bawah dan
bottomleft-radius kiri dengan ukuran berbeda
border- 2em; Garis melengkung pada sisi bawah dan
bottomleft-radius kiri dengan ukuran sama
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

79
Pemrograman Web1
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,
Inline; yang memberi desain background
berbeda hanya pada elemen tersebut
Itulah tadi tentang selector property dan value dari CSS Latihan:
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
80
Pemrograman Web1
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
: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- p:nth-lastoftype Memilih setiap elemen <p> yang merupakan
elemen <p> dari induknya, dihitung dari anak
81
Pemrograman Web1
lastoftype(n) 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:outofrange Memilih elemen <input> dengan nilai di luar
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)
: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
lainlain. Tuliskan script dibawah ini dan amatilah
82
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; color:
white; padding:
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>
83
Pemrograman Web1
</body>
</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
84
Pemrograman Web1
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
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
{
85
Pemrograman Web1
background-color: lightblue; 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>
86
Pemrograman Web1
</tr>
</table>
</body>
87
Pemrograman Web1
</html>
88
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.
89
Pemrograman Web1
<!DOCTYPE html> <html>

<style> input[type=text],
select { width: 100%;
padding: 12px 20px;
margin: 8px 0; display:
inlineblock; border: 1px
solid #ccc; border-
radius: 4px; box-sizing:
borderbox; }
input[type=submit] { width:
20%;
background-color: #4CAF50;
color: white; padding: 14px
20px; margin: 8px 0;
border: none; borderradius:
4px; cursor:
pointer;
90
Pemrograman Web1
} input[type=submit]:hover
{ background-color:
#45a049
; }
div {
border-radius: 5px; backgroundcolor:
#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>
<option value="Manajemen
Informatika">Manajemen Informatika</option>
<option value="Manajemen
Informatika">Rekayasa Perangkat Lunak</option>
</select>
91
Pemrograman Web1
</form>
</div>
</body>
</html>
92
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>
93
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
94
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;
textdecoration: none;
}
li a.active {
95
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>
96
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:
97
Pemrograman Web1
<!DOCTYPE html>
<html>
<head>
<style> body
{
background-color: lightblue;
} ul
{
list-style-type: none;
margin: 0; padding: 0;
overflow: hidden; background-
color: #333;
} li { float: left;
border-right:1px solid #bbb;
} li:last-child { border-
right: none;
} li a
{
display: block;
color: white;
textalign: center;
padding: 14px 16px;
text-decoration: none;
} a:hover
{
background-color: #111;
}
.active {
}
98
Pemrograman Web1
</style>
</head>
<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>
99
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:
100
Pemrograman Web1
Berikut adalah script untuk membuat layout website responsive

dengan CSS:
101
Pemrograman Web1
102
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 { fontsize:
50px;
}
/* Style top navigation bar */
.topnav { overflow: hidden;
backgroundcolor: #333;
}
/* Style topnav links */
.topnav a { float:
left; display: block;
color: #f2f2f2;
textalign: center;
padding: 14px 16px;
text-decoration: none;
}
/* perubahan warna pada saat penunjukan pointer
di menu navigasi */ .topnav a:hover
{ background-color: #ddd; color: black; }
103
Pemrograman Web1
104
Pemrograman Web1
105
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; paddingleft:
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;
}
106
Pemrograman Web1
107
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>
108
Pemrograman Web1
<p>PROGRAM STUDI</p>
<p> STMIK Pelita Nusantara memiliki 5
Program Studi yaitu
<ul>
<li>Teknik Informatika</li>
109
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>
110
Pemrograman Web1
</ul></p>
</div>
</div>
</div>
111
Pemrograman Web1
<div class="footer">
<h2>@copyrigt yuda@pelitanusantara</h2>
112
Pemrograman Web1
</div>
</body>
</html>
113
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
114
• direktori js: bootstrap.js
• direktori font: file-file font glyphicons
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
115
sebaliknya. Pengaturan ini membentuk sifat
responsive Bootstrap.
• Baris ke-7 memanggil file css bootstrap.
• 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:
116
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
obyekobyek dalam laman teratur rapi.
117
• Gunakan kelas row untuk membuat kelompok
kolom
• Tempatkan konten laman dalam kolom
• Setiap kolom memiliki jarak dengan kolom lain
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.
118
Form Bootstrap
Ada 3 jenis tampilan form dalam bootstrap:

• 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="formcontrol" id="email"
placeholder="Enter email"
name="email">
</div>
119
<label
for="pwd">Password:</label>
<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
btndefault">Submit</button> </form>
</div>
Form inline:
120
Form inline hanya berlaku untuk layar minimal
768px. Dibawah itu akan ditampilkan seperti form
vertikal.
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> <input
type="password"
placeholder="Enter
password" name="pwd">
</div>
<label><input
type="checkbox"
121
name="remember">
Remember me</label>
</div>
<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">
122
<label class="control-label col-sm-2"
for="email">Email:</label>
<div class="col-sm-10">
<input type="email"
class="formcontrol" id="email" placeholder="Enter
email">
</div>
</div>
<label class="control-label col-sm-2"
for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password"
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
btndefault">Submit</button>
</div>
</div>
123
</form>
</div>
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
124
(add_prodi.html) o mata kuliah (add_matkul.html)
o mengajar (add_mengajar.html) o nilai
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">
125
<input type="text" class="form-control"
name="fkode_matkul">
</div>
</div>
<div class="form-group"> <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>
class="control-label col-
md-4" for="fkode_prodi">
Kode prodi
</label>
<div class="col-md-
2"> <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
126
value="A15">Ilkom</option>
<option
value="A22">D3-TI</option>
<option
value="A24">Broadcasting</option>
<option
value="P31">Pasca
Sarjana</option>
</select>
</div>
</div>
md-4" for="fsks">
SKS
</label>
<div class="col-md-
2"> <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>
127
</div>
</div>
<label class="control-label col-
md-4" for="fmdt">
Semester
</label>
<div class="col-md-
1"> <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
128
value="2">Praktek
</label>
</div>
<div class="radio">
<label

value="3">Teori/Praktek
</label>
</div>
</div>
</div>
<div>
<div class="col-md-
10 textcenter">
<button type="submit"
class="btn btn-default">
Simpan </button>
</div>
</body>
</html>
129
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.
130
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 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
131
mendukung Java Srcipt. Browser yang
dapat digunakan adalah internet explorer
dan Netscape Navigator.
Penulisan Java Script
Kode Java Script dituliskan pada file

HTML.Terdapat dua cara untuk menuliskan kodekode
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>
132
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
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
133
Javascript
<HTML>
<BODY>
<B>Bagian Pertama ini ditulis dengan HTML!</B>
<P>

</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>");
135
document.writeln("<H1>UNIVERSITAS KOMPUTER
INDONESIA</H1>");
document.writeln("<H2>FAKULTAS TEKNIK dan
ILMU KOMPUTER<H2>");
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
136
:
//ini komentar
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 :
137
var nama; Nama = ”Bunga Lestari”
var nama = ” Zaskia Mecca” X = 1990; var X
= 1998; Y =
08170223513 var Y;
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).
138
Contoh :
var a = 3.14533567;
var b = 1.23456E+3;
Tipe String
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
139
Digunakan untuk operan beripe numerik. Ada dua
macam operator aritmatik, yaitu operator numerik
tunggal dan operator aritmatik biner. Perbedaan
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
140
Operator Manipulasi Bit
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
141
Digunakan untuk membandingkan dua buah
operan. Operan yang dikenal operator ini dapat
bertipe string, numerik, maupun ekspresi lain.
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.
;
142
akan menghasilkan ”JavaScript” pada variabel nama
Contoh Program JavaScript

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

</SCRIPT></P>
</BODY> </HTML>
143
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>
145
latihan :
• Modifikasi program sebelumnya agar dapat
melakukan operasi pengurangan, perkalian
dan pembagian !!
146
3.1 Objek Untuk memasukkan Data Terdapat
beberapa objek yang dapat digunakan untuk
memeasukkan data. Objekobjek tersebut biasanya
terdapat dalam suatu form. Adapun objekobjek
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">

</script>
<form name ="fform">
<H1> Memasukkan Data Dengan Objek
Teks</H1><hr>
<PRE>
147
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>
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
148
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
adio_box(t
his.form)" >
<input
type="rese t"
value="RES
ET"></p>
</form>
149
</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>

150
</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>
151
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>
<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>
152
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>
153
<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>
</html>
154
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
155
gambar 1
gambar 2
156
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
157
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
IFELSE</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>
159
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>
<INPUT TYPE="button" value="Hitung"
onclick="hitungtotal()">
<INPUT TYPE="reset" value="Ulang">
162
</center></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
163
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>
<FORM NAME ="fform"> <table
border="1" width="100%"
ALIGN="center" > <tr>
<td width="100%" colspan="4"><H2
ALIGN="center">Menghitung Indeks
165
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">
<INPUT TYPE="button" value="Hitung"
onclick="hitungip()">
<INPUT TYPE="reset" value="Ulang"> </p></td>
</tr>
<tr>
<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>
166
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.
167
<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"> <INPUT
TYPE="button" value="Hitung"
onclick="tanyabulan()"><INPUT TYPE="reset"
value="Ulang">
</PRE>
</FORM>
</BODY>
</HTML>
169
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
170
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 :
5.1 Perulangan
Untuk mengulang kejadian beberapa kali maka kita
membutuhkan proses perulangan. Pada JavaScript
dikenal beberapa metode/cara perulangan.
171
5.2 Perulangan For
Digunakan untuk mengeksekusi
pernyataanpernyataan 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 .
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>");
}
172
---------------------");
// akhir dari penyembunyian -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
5.3 Perulangan While

Perulangan lain yang dapat digunakan adalah
dengan menggunakan perintah While. Perintah
173
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)
{
ulang
perny
ataan
ini;
}

<HTML>
II</TITLE></HEAD>
<SCRIPT LANGUAGE="JavaScript"> 
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
174
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);
175
<HTML>
III(DoWhile)</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">


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

:
1. Tampilan awal
2. Prompt password
3. Alert apabila terjadi kesalahan password
177
4. Alert apabila telah terjadi 3 kali kesalahan
5. Apabila password benar
6. Halaman utama
178
Latihan :
1. Buat program untuk menentukan faktorial
dan jumlah deret sampai ke N.
2. Buat program untuk menghitung saldo akhir

dari suatu tabungan dengan bunga dan jangka waktu
tertentu :
Input :
Saldo : 100000
179
Bunga : 10
Waktu : 3
Ketika user menekan tombol Hitung maka akan muncul
hasil seperti berikut :
Saldo Bulan 1 = Rp. 110000
180

Materi Pemrograman-Web-1

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Materi Pemrograman-Web-1

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrograman Web1

Program Studi Bisnis Digital

5.2 Penggabungan Baris Dan Kolom Pada Tabel...............40

1.1 Pengertian dan Latar Belakang Website

membuat website menjadi lebih menarik dan interaktif dan dapat

E-Commerce adalah kegiatan perdagangan yang

berita, dokumen dan tautan ke situs tertentu yang bersifat

rumah kita untuk acuan seseorang mengunjungi rumah kita.

12. .sch.id : khusus untuk Lembaga Pendidikan yang

2.1. Jenis-jenis editor

menuliskan sepenuhnya tanpa bantuan atau saran apapun

menghasilkan pemakaian yang ramah lingkungan

ditambah lagi bracket bersifat gratis yang membuat

Aptana Studio bersifat multiplatform. Editor ini memiliki

Pengembangan HTML dari versi 1 sampai ke versi 4

Berikut tabel lengkap dari awal perkembangan HTML

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

1. Elemen HTML Bersarang elemen HTML dapat bersarang

Output dari script diatas adalah sebagai berikut:

 Tag ketiga adalah body untuk mendefinisikan tubuh

 Unsur konten adalah “heading pertama saya”

Dan berikut adalah gambar dari output script di atas:

 Unsur konten adalah “heading pertama saya”

menampilkan urutan dengan angka, akan teteapi no urut

 <ol type = ”A”> ol dengan type “A” akan

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

 <ul type= “circle”> ul dengan type “circle” akan

dengan lingkarann hitam, jika ingin

3.3 Elemen inline

Berikut adalah output dari script di atas

 Tag kelima adalah p yang menandakan sebuah paragraf di

nilai seperti: name = “value”. Berikut adalah contoh-contoh dari

Output dari script di atas adalah sebagai berikut:

3.4.2 Atribut src dari tag img

Output dari script diatas adalah sebagai berikut:

ukuran gambar berikut adalah contoh penulisan untuk

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:

<h1 align=center> MACAM-MACAM WARNA DI HTML </h1>

Berikut adalah hasil dari script diatas

Berikut contoh script dari pembuatan tabel pada HTML

Berikut adalah hasil dari script diatas:

di atas ada 5 kolom, oleh karena itu tag td ada sebanyak

Berikut script colspan untuk gambar di atas

Berikut script colspan untuk gambar di atas

5.3 Penggunaan Colspan dan Rowspan

Berikut adalah script HTML untuk membuat penggunaan

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

Berikut adalah hasil dari script di atas

value atau nilai dari atribut colspan adalah “5” yang