iii

978-623-8120-28-4 (PDF)

iv
 Daftar Isi

Kata Pengantar ......................................................................................................................................... v

Daftar Isi ................................................................................................................................................. vii
BAB 1 ......................................................................................................................................................1
1.1 WEBSITE ...................................................................................................................................2
1.2 APA ITU HTML ?........................................................................................................................3
1.3 SEJARAH SINGKAT HTML ..........................................................................................................3
1.4 HTML dan HTML5 .....................................................................................................................4
1.5 CASCADING STYLE SHEETS (CSS) ..............................................................................................5
1.6 JAVA SCRIPT (JS) .......................................................................................................................5
1.7 ANALOGI PERBEDAAN HTML CSS DAN JS.................................................................................6
1.8 TEXT EDITOR .............................................................................................................................6
1.9 WEB BROWSER .........................................................................................................................8
1.10 STRUKTUR DASAR HTML ..........................................................................................................9
1.11 DEFINISI TAG ......................................................................................................................... 11
1.12 DEFINISI ELEMENT ................................................................................................................. 12
1.13 DEFINISI ATRIBUT .................................................................................................................. 14
BAB 2 .................................................................................................................................................... 15
2.1 HEADING ............................................................................................................................... 16
2.2 PARAGRAF ............................................................................................................................. 17
2.3 LIST HTML .............................................................................................................................. 21
2.4 HTML IMAGES ....................................................................................................................... 23
BAB 3 ..................................................................................................................................................... 26
3.1 HYPERLINK HTML .................................................................................................................. 27
3.2 FORM ..................................................................................................................................... 30
BAB 4 ..................................................................................................................................................... 39
4.1 TABEL ..................................................................................................................................... 40
4.2 FRAME ................................................................................................................................... 45
BAB 5 ................................................................................................................................................... 54
5.1 OVERVIEW CSS ...................................................................................................................... 55
5.2 PENEMPATAN CSS ................................................................................................................. 58

vii
 5.3 MEMULAI CSS ........................................................................................................................ 61
BAB 6 ..................................................................................................................................................... 67
6.1 MENGATUR FONT DENGAN CSS ........................................................................................... 68
6.2 FORMAT TEXT DENGAN CSS .................................................................................................. 70
6.3 MODIFIKASI LIST DENGAN CSS .............................................................................................. 74
6.4 MEMODIFIKASI BORDER DENGAN CSS ................................................................................. 76
BAB 7 ..................................................................................................................................................... 83
7.1 MARGIN DAN PADDING DENGAN CSS .................................................................................. 84
7.2 MENGATUR POSITION DENGAN CSS ..................................................................................... 86
7.3 TEKNIK FLOAT DENGAN CSS .................................................................................................. 90
7.4 DESAIN TABEL DENGAN CSS .................................................................................................. 91
BAB 8 ..................................................................................................................................................... 97
8.1 MEMBERIKAN EFEK PADA GAMBAR DENGAN CSS ............................................................... 98
8.2 MEMBUAT TEMPLATE WEB ................................................................................................ 104
BAB 9 ................................................................................................................................................... 109
9.1 MENGISI KONTEN ................................................................................................................ 110
9.2 MEMBUAT HALAMAN MENJADI RESPONSIVE .................................................................... 114
BAB 10 ................................................................................................................................................. 118
10.1 INTRODUCTION ................................................................................................................... 119
10.2 CARA MEMBUAT JAVASCRIPT DI WEBSITE ......................................................................... 121
BAB 11 ................................................................................................................................................. 136
11.1 VARIABEL ............................................................................................................................. 137
11.2 TIPE DATA ............................................................................................................................ 140
11.3 OPERATOR ........................................................................................................................... 141
BAB 12 ................................................................................................................................................. 153
12.1 PERCABANGAN .................................................................................................................... 154
12.2 PERULANGAN ...................................................................................................................... 164
BAB 13 ................................................................................................................................................. 177
13.1 STRUKTUR DATA ARRAY ...................................................................................................... 178
13.2 DOM (Document Object Model) ......................................................................................... 188
BAB 14 ................................................................................................................................................. 200
14.1 MEMBUAT ANIMASI TRANSISI ............................................................................................ 201
BAB 15 ................................................................................................................................................. 214
viii
 15.1 PENGANTAR WEB ONLINE .................................................................................................. 215
15.2 MENGONLINEKAN WEB ...................................................................................................... 215
Penutup ............................................................................................................................................... 227
DAFTAR PUSTAKA ................................................................................................................................ 228

ix
 BAB 1
PENGENALAN HTML

TUJUAN :
a. Mahasiswa mengetahui perbedaan Web Client dengan Web Server
b. Mahasiswa Mengetahui Pengertian dan Sejarah HTML
c. Mahasiswa Mengetahui Text Editor Pemrograman Web
d. Mahasiswa Mengetahui Web Browser
e. Mahasiswa Mengetahui Perbedaan HTML, CSS dan Java Script
f. Mahasiswa mengetahui struktur HTML, Tag, element dan Atribut dari HTML
g. Mahasiswa mampu membuat document HTML sederhana

Overview :
Aplikasi web di buat dengan menggunakan tag HTML. Pada sesi BAB ini akan di bahas
beberapa hal mendasar atau istilah yang berkaitan dnegan pemrograman web, sampai
membuat file web beserta penulisan awal atau struktur dasar dari web tersebut yang sudah
memuat Tag, element serta atribut.

1
1.1 WEBSITE
Website merupakan bagian yang tidak terpisahkan dari perkembangan internet, jumlah pengguna
sampai saat ini mencapai lebih dari 1,9 miliar di seluruh dunia (internetlivestats, 2022). Kumlah
tersebut di perkirakan akan terus mengalami peningkatan melihat saat ini website juga terus
berkembang dan semakin bagus. Tujuan penggunaan website awalnya hanya digunakan untuk
kalangan pribadi, namun sekrang hampir seluruh perusahan, intansi, bahkan usaha kuliner juga
memiliki website untuk media informasi mereka.
Website adalah kumpulan halaman yang berisi suatu informasi tertentu yang kemudain bisa di
akses oleh siapapun, dimanapun dan kapanpun dengan mudah melalui koneksi internet. Proses
pembuatan website salah satunya dapat dilakukan dengan dengan pemrograman web atau
menuliskan sebuah intruksi–intruksi yang di berikan kepada komputer untuk membuat suatu tugas
atau fungsi tertentu. Dengan kata lain Pemrograman Web merupakan cara atau Proses untuk
menjalankan intruksi ataupun perintah kepada komputer yang terhubung dengan internet yang dapat
digunakan untuk membuat tugas maupun fungsi lainnya. Kemudian ketika menjalankan sebuah
program tersebut di dalam web dapat melaui web browser misalnya: Opera, mozilla, Chrome, dll.

a) Jenis - jenis Website

• Website Statis
Website Statis merupakan web yang isi atau kontennya tidak pernah di perbaharui
atau di update dalam durasi waktu tertentu, atau bisa di katakana isinya tidak pernah
berubah sama sekali, contoh website statis seperti web company profile suatu instansi atau
perusahaan dll. Tujuan web ini yaitu user atau masyarakat dapat melihat tentang profil dari
instansi atau perusahaan tersebut. Website statis ini cenderung tidak responsive, hal ini
karena ketika akan mengupdate fitur dari webnya harus mengubah scriptnya atau perintah
program secara langsung, tidak dapat dilakukan melalui CMS yang tersedia.

• Website Dinamis
Situs web yang dinamis adalah situs web yang konten atau elemen lainnya sering
berubah karena pengguna atau pengunjung lain dapat memperbarui informasi situs secara
diam-diam. Website dinamis ini biasanya cocok di gunakan untuk web blog, jejaring sosial,
toko online dll. Pembuatan website ini membutuhkan waktu yang cukup lama karena
menggunakan database untuk menyimpan semua data dari website yang bersangkutan.

• Website Interaktif
Website Interaktif adalah website yang hampir mirip dengan website yang bersifat
statis; namun, interaksi di situs web interaktif lebih sering atau sering terjadi karena
ditujukan untuk pengguna yang juga akan menggunakannya untuk mengedit konten di situs
web tersebut. Tidak seperti website dinamis yang pilihannya hanya share atau tinggalkan
komentar. Seorang pengguna atau pengguna juga dapat melakukan tindakan saat mengedit
konten di situs web interaktif seperti YouTube.

b) Development Web
Dalam development web, terdapat istilah yang dinamakan Client - side serta Server - side
Scripting. Dua istilah tersebut digunakan untuk mengelompokkan dimana bahasa atau kode
2
 pemrograman tersebut dijalankan, apakah berjalan di sisi client atau di sisi server. Jika diartikan dalam
arti lain, Client-side memiliki arti sisi pengguna dan Server-side memiliki arti sisi server atau penyedia.
Berikut penjelasan singkat mengenao web client dan web server.
• Client Side Scripting
Klien web, sering dikenal sebagai skrip sisi klien, adalah bagian dari bahasa
pemrograman web di mana pemrosesan sintaksis terjadi di sisi klien. Dalam proses klien web,
browser web berfungsi sebagai klien. Namun, ada juga perpustakaan yang tersedia di aplikasi
browser web yang dapat digunakan untuk menulis ulang kode atau struktur sintaksis apa pun
yang ditemukan di halaman web yang menggunakan skrip sisi klien. Akibatnya, dapat
dikatakan bahwa skrip sisi klien mengacu pada aktivitas apa pun yang dilakukan di sisi
pengguna atau klien (komputer pengguna). Contoh skrip sisi klien meliputi, antara lain,
XHTML, HTML, JavaScript, CSS, JQUERY, dan XML.

• Server Side Scripting

Yang dimaksud dengan “server-side scripting” adalah bahasa pemrograman web yang
proses pengembangannya dilakukan di sisi server, yaitu web server yang terintegrasi dengan
web engine. Tujuan dari mesin pencari online adalah untuk meng-goagle setiap kemungkinan
frase nanti. Mesin web adalah komponen server web yang perlu diinstal di komputer
sesegera mungkin.
Ada skrip sisi server di situs web dinamis. Dalam skrip sisi server, kecepatan dan efisiensi
komputer server adalah faktor penentu seberapa cepat situs web memuat atau beroperasi.
Karena pada dasarnya bersifat rahasia, sintaks tertulis di sisi server tidak dapat dilihat di
antarmuka klien atau pengguna. PHP, Active Server Pages (ASP), Lasso, Java Server Pages
(JSP), dan SSI adalah contoh program skrip sisi server.

1.2 APA ITU HTML ?

HTML, sering dikenal sebagai Hyper-Text Markup Language, adalah bahasa utama yang
digunakan di seluruh dunia oleh situs web. Hampir semua website yang tersedia di internet dibuat
dengan menggunakan variasi HTML. Pengembang dapat menambahkan teks, multimedia, dan tautan
ke browser yang kompatibel dengan atribut atau elemen lain dengan menggunakan HTML. Dari
elemen yang dapat terhubung ke dokumen Anda (hiperteks) hingga elemen yang membuat dokumen
Anda lebih interaktif, semuanya terdapat dalam satu file HTML.
Dengan kata lain, HTML (Hypertext Markup Language) adalah bahasa yang biasa digunakan
untuk menandai dokumen yang akan dipublikasikan secara online. Dalam bahasa sederhana, HTML
mengilustrasikan struktur halaman Web, yang terdiri dari serangkaian elemen HTML, untuk
menjelaskan kepada browser web cara menampilkan konten yang telah dipilih.
HTML memiliki standar yang dibuat oleh W3C (World Wide Web Consortium) pada tahun 1997
dan semakin lama semakin bermanfaat. Dalam HTML, ada tag yang digunakan untuk menunjukkan
struktur. Tag dan elemen dapat dilindungi dengan menggunakan karakter < dan >.
1.3 SEJARAH SINGKAT HTML
• Awal mula kemunculan HTML yaitu dimulai dari seorang ilmuan yang bernama Tim Berners-Lee
yang bekerja di CERN.

3
 • CERN bukanlah bisnis yang berhubungan dengan teknologi atau bahkan internet. CERN adalah
singkatan dari Dewan Riset Nuklir Eropa, atau singkatnya CERN. Ini mengacu pada Komisi Eropa
untuk Fisika Nuklir.

Gambar 1.1 Tim Berners-Lee

• Sejak awal, HTML telah mengalami banyak bug, dan versi HTML terbaru saat tulisan ini dibuat
adalah HTML5. Dalam hal bahasa markup, HTML5 telah memimpin akhir-akhir ini dan sudah
menyertakan beberapa fitur yang ada di versi HTML sebelumnya, serta fitur yang dihilangkan
tetapi ternyata ada di versi XHTML sebelumnya. Meskipun tidak ada pembaruan versi khusus
untuk setiap rilis baru, fitur baru ditambahkan ke HTML5 hampir setiap hari. Baik audio maupun
video pada dasarnya berbeda antara HTML dan HTML5, tetapi di setiap fitur HTML, masing-
masing adalah produk dari HTML5, seperti yang dapat dilihat pada contoh gambar di bawah ini.

HTML 2.0
1995 Developed by the IETF’s
HTML Working Group
Html 3.2
W3C’s first recommendation
1997
for HTML which represented
the consensus on HTML HTML 4.01
features for 1996
Added support for more
1999 multimedia, scripting
language, style shett, etc
Xhtml 1.0
Whith a wealth of new 2000 HTML 5
feature, XHTML 1.0 was a
reformulation of HTML 4.01 in A work in progress, intends
XML to replace HTML 3.2, HTML
2014 4 and XHTML 1.x.

Gambar 1.2 Perubahan Versi HTML

1.4 HTML dan HTML5

• HTML5 mendukung SVG, kanvas, dan grafik vektor lainnya, sedangkan dalam HTML, grafik vektor
hanya dapat digunakan dengan teknologi lain seperti Flash, VML (Vector Markup Language),
Silver-light, dan lain-lain. SVG (Scalable Vector Graphic) adalah format gambar yang menggunakan
XML (eXtensible Markup Language) sebagai dasar pembuatan gambar vektor dua dimensi. HTML5
menggunakan database web SQL, sedangkan HTML hanya memiliki cache browser yang dapat
digunakan untuk tujuan ini. HTML5 juga menggunakan aplikasi untuk caching data.

4
 • Perbedaan lain antara HTML dan HTML5 adalah bahwa HTML5 tidak mencegah JavaScript berjalan
di browser itu sendiri (berjalan di utas terpisah di bagian luar browser), sedangkan HTML5
melakukannya.
• HTML5 mendukung kontrol formulir baru, termasuk waktu dan tanggal, email, nomor telepon,
jangkauan, telegraf, url, pencarian, dan lain-lain.

Gambar 1.3 Perbandingan HTML 4 dengan HTML 5

1.5 CASCADING STYLE SHEETS (CSS)
Singkatan CSS adalah singkatan dari "Cascading Style Sheets". Sesuai dengan namanya, CSS
memiliki pengertian “style sheet language” dalam bahasa pemrograman yang digunakan untuk
pengembangan web. CSS adalah bahasa pemrograman yang digunakan untuk membuat website
header. CSS menggunakan id dan penanda yang dapat dikenali kelas saat mendesain header situs web.
Di bidang pemrograman dan teknologi yang berkembang pesat , CSS tidak lagi hanya digunakan
dengan HTML dan XHTML, namun sudah bisa digunakan untuk mengembangkan tampilans aplikasi
Android . CSS dijalankan menggunakan id atau kelas .
Fungsi CSS
• Mempercantik variasi tampilan
• Membuat website tampil lebih rapi di berbagai ukuran layar
• Mempercepat Loading Halaman Web
• Memudahkan pengelolaan kode

1.6 JAVA SCRIPT (JS)

Javascript adalah satu - satunya bahasa web yang dapat membuat beranda situs web Anda lebih
menarik dan dinamis .Eksekusi bahasa Javascript terjadi di ujung pengguna situs web atau lokasi lain
daripada di server, yang berbeda dari PHP. Javascript digambarkan berbeda dari HTML dan CSS. HTML
digunakan untuk mengubah format tabular konten , dan CSS mengubah tata letak, oleh karena itu
desain keseluruhannya sangat berbeda .Ada beberapa contoh orang yang menggunakan HTML , CSS,

5
 dan javascript secara bersamaan, termasuk konstruksi rumah , dekorasi interior , dan lampu serta pintu
- pintu.
Akibatnya , HTML digambarkan sebagai sebuah blok bangunan yang dapat digunakan untuk
merenungkan segala sesuatu, bahkan tempat - tempat dengan alamat tetap seperti tembok, pintu,
atap, dan lain - lain.Sebaliknya, CSS adalah alat dekorasi rumah yang dapat mengubah tampilan
wallpaper, karpet , dan hal - hal lain di rumah Anda .Javascript berguna untuk hal - hal yang perlu
responsif dan menghidupkan , seperti menyalakan lampu atau membuat pintu.
Javascript makes websites more responsive since, even in the absence of a problem, their
contents will still change significantly. You can find your house number. The absence of a light or a
pintu may not be a problem, but the large house may become dim and begin to leak a little bit of
moisture. Selain itu, ketiadaan javascript membuat website menjadi kurang menarik.

1.7 ANALOGI PERBEDAAN HTML CSS DAN JS

Agar lebih mudah memahami hubungan antara HTML CSS dan Java Script, silahkan lihat gambar
1.4 di bawah ini.

Gambar 1.4 Analogi Perbedaan HTML CSS dan Java Script

Dari gambar di atas dapat di pahami jika HTML di analogikan sebagai badan dari seseorang
manusia tanpa pakaian. Karena HTML merupakan kerangka dasar yang digunakan untuk membangun
sebuah web.
Sedangkan CSS dianalogikan sebagai pakaian seperti baju, celana, dasi, ikat pinggang dan lain
sebagainya. Yang di maksud dalam analogi ini adalah agar membuat tubuh manusia terlihat lebih cantik
atau keren dengan berbagai macam jenis pakaian yang ada seperti di dunia nyata ini. Sehingga dapat
membuat tampilan website menjadi indah.
Java script dianalogikan sebagai otak manusia, hal ini di maksud karena otak manusia memiliki
peran inti dalam menggerakkan atau menjalankan tindakan dari anggota tubuh manusia menjadi
interaktif. Manusia dapat berbicara sesuai topik yang di bahas, dapat bergerak dan lain sebagainya itu
didasari dari perintah yang ada dalam otak. Jadi dengan menggunakan java script website akan
menjadi interaktif, dapat di berikan banyak animasi dan juga lebih user friendly.

1.8 TEXT EDITOR

Editor teks adalah perangkat lunak atau program komputer yang memungkinkan pengguna,
dalam hal ini Anda, untuk membuat, mengedit, atau memodifikasi file teks biasa. Editor teks ini secara
alami dapat digunakan untuk membuat program komputer dan mengekstrak kode sumber dari bahasa
pemrograman. Selain itu, editor teks dapat digunakan untuk membuat situs web, templat situs web,
dan aplikasi terkait lainnya.

6
Beberapa aplikasi text editor diantaranya :
a) NotePad / NotePad ++

Gambar 1.5 Icon Notepad dan Notepad ++

Microsoft Notepad merupakan software pemrosesan kata yang disediakan oleh Windows.
Sehingga software ini sudah tersedia jika anda menggunakan system operasi windows. Notepad dapat
digunakan untuk membuat file tipe log ataupun segala bentuk file termasuk HTML, CSS dan Java Script.
Namun demikian notepad bawaan windows memiliki belum memiliki fitur – fitur dalam
mendukung penulisan perintah – perintah pemrograman. Sehingga dikembangkanlah aplikasi tersebut
yang terdapat fitur – fitur dalam mempermudah dalam digunakan untuk menulis intruksi – intruksi
Bahasa pemrograman, aplikasi tersebut dinamakan notepad plus – plus yang bisa di unduh pada
https://notepad-plus-plus.org/downloads/.

b) Adobe Dreamweaver

Gambar 1.6 Icon Adobe Dreamweaver

Program editor web yang dikenal dengan nama Adobe Dreamweaver dikembangkan oleh Adobe
Systems setelah sebelumnya dikenal dengan nama Macromedia Dreamweaver oleh Macromedia.
Karena fiturnya yang mudah digunakan dan digunakan secara luas oleh pengembang web, aplikasi ini
sering digunakan. Versi 8 Macromedia Dreamweaver dirilis sebelum Adobe Systems mengakuisisi
Macromedia. Versi terbaru Dreamweaver dari Adobe Systems adalah versi 12, yang tersedia di Adobe
Creative Cloud (sering disingkat Adobe Cc). Versi gratis Aalikasi tersedia untuk diunduh di
https://www.adobe.com/id_id/products/dreamweaver/free-trial-download.html

c) Sublime Text

Gambar 1.7 Icon Sublime Text

Perangkat lunak pengedit teks yang disebut Sublime Text sering digunakan oleh programmer,
terutama pengembang web. Aplikasi ini sangat penting untuk pengembang web saat membangun
aplikasi apa pun. Banyak para programer menggunkan aplikasi sublime text ini untuk
7
 menyempurnakan situs web yang mereka buat. Aplikasi ini memberikan warna dari tulisan koding yang
bervariasi, interaktif, multiple tabs, tab multi select, dan tentunya sangat menarik. Anda juga dapat
mengubah warna tema pada sublime, selain itu variasi warna pada coding membuat program anda
menjadi lebih beragam dan interaktif, sehingga membuat anda untuk lebih santai dalam proses coding.
Text editor ini berfungsi dalam menulis sejumlah code script serta dapat mendukung berbagai
macam jenis file. Selain itu, sublime Text juga mendukung berbagai macam programming languages
diantaranya CSS, C, C++, C#, html, ASP dan lain sebagainya. Python API pada sublime telah diperbarui
ke Python 3.8. Aplikasi ini dapat di unduh pada https://www.sublimetext.com/download

d) Visual Studio Code

Gambar 1.8 Icon Visual Studio Code

Visual Code Studio adalah editor kode gratis yang dapat digunakan pada sistem operasi desktop
berbasis Windows, Linux, dan Macintosh. Kode untuk editor ini dibuat oleh Microsoft, penyedia
teknologi terdepan di dunia. Kode Visual adalah editor perangkat lunak yang tangguh, namun
terkadang mengalami kegagalan fungsi saat digunakan. Dia mampu membuat dan menulis kode
ringkasan dalam berbagai bahasa pemrograman. Yakni, JavaScript, TypeScript, dan Node.js.
Juga kompatibel dengan bahasa lain dan lingkungan runtime, seperti PHP, Python, Java, and.NET,
adalah Visual Code Studio. Ini terkait dengan ekonomi yang kuat dan perluasan pengetahuan yang
mengancam. Anda bisa mendapatkan Visual Studio Code dari situs ini :
https://code.visualstudio.com/download
Selain itu masih banyak lagi aplikasi text editor lainnya. Dalam praktikum pemrograman web 1
ini nantinya bebas ingin menggunakan aplikasi text editor yang mana saja karena pada dasarnya
perbedaan text editor hanya terletak pada vasilitas yang di milikinya. Intinya anda harus menyimpan
file tersebut dengan ekstensi penyimpanan file tersebut.

1.9 WEB BROWSER

Tujuan dari web browser, juga dikenal sebagai web browser, web browser, atau penelusur web
(Bahasa Inggris: web browser), adalah untuk mengambil dan mengirimkan informasi dari Internet.
Sepotong informasi diidentifikasi dengan menggunakan metode untuk mengenalinya sebagai
informasi, yang dapat berupa situs web, gambar, video, atau jenis konten lainnya. Browser Web, biasa
disebut sebagai browser, adalah alat yang digunakan untuk mengakses, menyimpan, dan mengirimkan
informasi di internet. Dan satu-satunya format yang digunakan untuk informasi adalah HTML.
Kode HTML yang dibuat akan dievaluasi oleh browser web untuk memastikan bahwa kode
tersebut ditampilkan sebagaimana mestinya. Menurut teorinya, setiap browser web dapat
menampilkan kode HTML dengan benar, namun jika Anda terbiasa dengan desain dokumen, setiap
browser memiliki beberapa perbedaan. Google Chrome, Firefox, Internet Explorer, Opera, dan Safari
adalah beberapa browser online yang umum.
8
 HTML dibuat dan diadopsi oleh W3C, sebuah organisasi standar global dengan fokus pada web
(World Wide Web Consortium). Hal ini disebabkan oleh fakta bahwa setiap perangkat lunak browser
web menggunakan standar pengkodean HTML yang berbeda, sehingga diperlukan pembuatan standar
yang seragam untuk semua browser. Namun, dalam praktiknya, standar ini hanya berfungsi sebagai
saran. Beberapa browser web dapat membuat gambar sendiri.

Berikut adalah referensi web browser yang bisa di gunakan

a) Mozila Firefox

Gambar 1.9 Icon Mozila Firefox

Dapat didownload pada https://www.mozilla.org/id/firefox/new/

b) Google Chrome

Gambar 1.10 Icon Google Chrome

Dapat didownload pada https://www.google.com/intl/id_id/chrome/

c) Microsoft Edge

Gambar 1.11 Icon Microsoft Edge

Dapat didownload pada https://www.microsoft.com/id-id/edge/home?form=MA13FJ

1.10 STRUKTUR DASAR HTML

Untuk membuat dokumen HTML standar, gunakan tag html, head, dan body serta tag yang
berjarak sama. Sebagai contoh, dokumen HTML berikut dihasilkan melalui sistem tag-by-tag:

9
 Gambar 1.12 Struktur Dasar HTML

o Semua dokumen HTML harus diawali dengan deklarasi "<!DOCTYPE html>."

o Dokumen HTML itu sendiri diawali dengan <html> dan diakhiri dengan </html>.
o Kode HTML yang dapat dilihat di web browser berada di antara tag "<body>" dan "</body>".

Contoh :

Gambar 1.13 Contoh Perintah HTML

Kemudian simpan file dengan ekstensi .html dan bukalah file trsebut dengan web browser.

ini adalah judul web,

di tulis di antara tag <title> … </title>

Informasi yang di tuliskan pada tag

<body>
…
</body>

Gambar 1.14 Contoh Hasil

Deklarasi <! DOCTYPE>
10
 • <!DOCTYPE> deklarasi ini akan menjelaskan jenis dokumen untuk membantu browser supaya
tampilan halaman web dapat di tampilkan dengan benar. Tag ini cukup di tuliskan sekali saja,
pada bagian paling atas halaman (sebelum tag HTML).
• <!DOCTYPE>deklarasi ini tidak case sensitive.
• <!DOCTYPE>deklarasi HTML5 adalah:

1.11 DEFINISI TAG

Tag adalah nama yang diberikan pada penanda awalan dan eksekusi elemen HTML saat ini.
Tag dibuat dengan tanda kurung siku (<...>), kemudian diberi nama dan kadang-kadang disertai atribut.

Konteks: "<p>", "<a>", "<body>", "<head>", dan istilah sejenis lainnya.

Tag secara konsisten menggunakan kata "pasangan". Terdapat tag untuk pembuka dan penutup.
Namun ada juga beberapa tag yang memiliki pasangan penutup yang tidak beraturan. Tag ditulis
dengan jelas dengan menggunakan karakter garis miring (/) di awal nama tag.

Tag Pembuka Isi Tag Tag Penutup

Gambar 1.15 Contoh Tag Pembuka Isi dan Penutup

Setiap tag memiliki fungsi yang berbeda. Ada alat yang tersedia untuk membuat judul, tautologi,
paragraf, judul, dan elemen lainnya.

Tag yang sering di gunakan dalam HTML

Tabel 1.1 Tag dan Fungsinya

11
1.12 DEFINISI ELEMENT
Elemen HTML adalah komponen yang mendukung dokumen HTML. Elemen juga disebut sebagai
simpul karena merupakan satu-satunya jenis simpul dalam diagram HTML yang dapat digunakan untuk
menyisipkan kode HTML dalam teks.

Gambar 1.16 Element dalam HTML

Ada tiga jenis simpul pada diagram yang dimaksud, elemen Node, atribut Node, dan teks Node.
Elemen terdiri dari penutup, isi, dan tag pembuka. Kadang juga menyebutkan beberapa atribut.

Contoh:

12
 Gambar 1.17 Element Tag

• Pada contoh di atas, hanya ada satu elemen dengan tag <p> yang memiliki atribut
align="center" dan bertuliskan Hello World!
• Elemen tidak hanya berisi teks, terkadang juga mengandung jenis elemen lainnya. biasanya ini
disebut sebagai elemen bersarang atau elemen di dalam elemen.

Element <head>

Selain berisi element title, Element ini berisi informasi meta tentang halaman HTML. Metadata
adalah data tentang dokumen HTML. Metadata umumnya akan menentukan judul dari dokumen,
kumpulan karakter, skrip, gaya dan informasi meta lainnya serta Metadata tidak akan ditampilkan di
halaman, tetapi dapat diurai oleh mesin.
Elemen meta saat ini ditujukan untuk "program robot" seperti mesin telusur daripada
pengguna atau orang yang mengunjungi web (mesin pencari). <meta charset=”utf-8”>? Menurut
definisi resmi, charset adalah sekumpulan instruksi yang digunakan untuk mengubah bit-bit dalam
HTML menjadi karakter. Akibatnya, rangkaian karakter UTF-8 memberikan petunjuk ke browser web
tentang cara mengonversi karakter UTF-8 rangkaian karakter HTML.
Elemen yang bisa masuk ke dalam elemen <head> adalah : <title> , <style>, <base>, <link>,
<meta>, <script> <noscript>

Gambar 1.18 Element di dalam Head

13
1.13 DEFINISI ATRIBUT
Kata tertentu yang ada di badan tag disebut atribut. Selain itu, atribut digambarkan sebagai
pengubah yang akan menunjukkan persyaratan elemen. Atribut dapat diterapkan ke elemen apa pun.
Ada elemen lain yang memerlukan penggunaan atribut, seperti elemen "a", "img", "video", dan "dll".

Gambar 1.19 Atribut Element <a>

• Tag "<a>" adalah tag yang digunakan untuk membuat link. Tag ini harus menggunakan atribut
href untuk menampilkan tujuan dari tautan yang rusak.
• Jumlah elemen atribut mungkin lebih besar dari satu.
Contoh:

Gambar 1.20 Atribut Element <img>

Atribut "src" khusus untuk tag "<img>” yang berfungsi sebagai tempat penampung gambar
yang akan ditampilkan. Atribut sebelumnya yang mengubah bentuk objek adalah lebar dan tinggi.
Contoh :

Gambar 1.21 Atribut src dalam Element <img>

“<h2>” berfungsi sebagai judul tag “h2”.

Align adalah nama atributnya,

Center adalah nilai atributnya, dan

Pengenalan atribut HTML adalah elemen dari tag h2.

14
 BAB 2
HEADING, PARAGRAF, LIST & IMAGE

TUJUAN :
a. Mahasiswa mampu memahami penggunaan Heading
b. Mahasiswa mampu membuat dokumen HTML dengan melakukan formatting
paragraph
c. Mahasiswa mampu melakukan listing pada dokumen HTML
d. Mahasiswa dapat menampilkan gambar pada HTML

Overview :
Pada sesi ini akan di pelajari bagaimana fungsi dari tag h1, h2, h3, dst atau di sebut heading,
membuat format text dan paragraph seperti membuat text tebal, garis bawah, miring, warna
font, ukuran font dan sejenisnya dengan menggunakan fungsi HTML. Juga di bahas cara
membuat list dan menampilkan gambar pada HTML.

15
2.1 HEADING
Heading adalah kumpulan kata-kata yang berfungsi sebagai judul atau subtitle dari dokumen
HTML dan tersedia dalam berbagai ukuran yang berbeda. Menurut aturan, tag <Hx> digunakan untuk
menunjuk judul apa pun, di mana "x" menunjukkan level apa pun dari 1 hingga 6. Tag Heading, sering
dikenal sebagai <Hx>, adalah tag yang mencakup kedua tag untuk awal dan tag untuk akhir.
Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :

Gambar 2.1 Contoh Sintak Heading

Hasilnya :

Gambar 2.2 Hasil Sintak Heading

16
2.2 PARAGRAF
a) Fromating Paragraf
Jika Anda membuat situs web, Anda juga harus mempertimbangkan untuk menyertakan
informasi yang akan diperlukan. HTML juga menyertakan elemen khusus untuk menggunakan
markup khusus untuk menentukan teks.
HTML dapat menggunakan tag <p> untuk membuat sebuah paragraph yang nantinya juga bisa
di berikan atribut sesuai kehendak yang diinginkan.
Elemen format yang dapat di gunakan untuk membuat atau menampilkan gaya khusus dari teks :
➢ Cetak Tebal : tag “<b>”
➢ Cetak Penting : tag “<strong>“
➢ Cetak Miring : tag “<i>“
➢ Garis bawah : tag “<u>“
➢ Menekankan : tag “<em>“
➢ Penanda / Menandai : tag “<mark>“
➢ Menjadi Kecil : tag “<small>“
➢ Menghapus : tag “<del>“
➢ Memasukan : tag “<ins>“
➢ Pangkah dibawah / Subscript : tag “<sub>“
➢ Pangkat diatas / Superscripts : tag “<sup>“

Gambar 2.3 Contoh 1 Sintak Formating Paragraf

Hasilnya dari sintak diatas seperti gambar berikut ini :

17
 Gambar 2.4 Hasil Contoh 1 Sintak Formating Paragraf

Sampai disini dapat di pahami proses penulisan dan apa masing-masing tag, elemen, dan
atribut untuk memahami cara membuat paragraf dalam HTML. Paragraf di bawah ini berfungsi
sebagai titik awal untuk membuat paragraf dalam format yang diinginkan. Ada tiga atribut / tag
yang dapat digabungkan langsung dengan tag paragraf <p> dalam kalimat ini. Tag atribut yang
dimaksud adalah:
➢ Menjadikan paragraf menjadi rata kiri dapat memakai <p align=”left”> … isi paragraf </p>
➢ Menjadikan paragraf menjadi rata kanandapat memakai <p align=”right”>.. isi paragraf </p>
➢ Menjadikan paragraf menjadi rata tengah dapat memakai <p align=”center”>.. isi paragraf </p>
➢ Menjadikan paragraf rata kiri kanan dapat memakai <p align=”justify”>.. isi paragraf </p>

Gambar 2.5 Contoh 2 Sintak Formating Paragraf

Berikut hasil syntac diatas:

18
 Gambar 2.6 Hasil Contoh 2 Sintak Formating Paragraf

b) Line Break
Jika kita terbiasa menekan Enter untuk memasukkan teks, ini tidak akan berfungsi saat menulis
dokumen HTML. Mempertimbangkan seberapa sering kami menggunakan tombol Enter, kami
tidak dapat mengatakan bahwa ini adalah pertama kalinya.
Untuk membuat baris baru berperilaku serupa dengan tombol Enter keyboard, gunakan tag
HTML Line Break. Menggunakan tag <br> untuk jeda baris

Gambar 2.7 Contoh Sintak Line Break

c) Preformatted Text
Hubungan antara setiap kata dalam teks atau kalimat yang relevan dalam dokumen web secara
konsisten satu dan sama. Teks yang ditulis dalam bahasa Galia harus diberi tag "<pre>" di awal
dan "</pre>" di akhir agar web browser menampilkan dokumen sesuai dengan alamat web yang
dimasukkan.
Dengan tag "<pre>", teks yang sudah "diformat sebelumnya" akan ditampilkan di browser
dengan ukuran font yang lebih mudah dibaca. Tag ini juga akan menimbulkan spasme, baris baru,
dan tap yang sesuai dengan teks asli saat ditampilkan di browser.

Gambar 2.8 Contoh Sintak Preformatted Text

19
d) Mengolah Properti Font
Selama proses pengkodean, mungkin ada saatnya Anda perlu melakukan beberapa pekerjaan
persiapan, atau bahkan Anda mungkin perlu mencocokkan jenis huruf yang Anda gunakan dengan
alasan saat ini, mungkin karena informasi penting yang perlu dipahami lebih baik, dll.
Tag style="property:value" dapat digunakan untuk merubah style property dari font. Berikut
ini bebrapa atribut style yang dapat digunakan untuk elemen styling HTML.
➢ “Face : mengubah jenis font
➢ “color : mengubah warna text
➢ “font-family : mengubah font text
➢ “font-size : mengubah ukuran text
➢ “text-align : mengubah perataan text

Gambar 2.9 Contoh Sintak Properti Font

e) Membuat Garis Horizontal

Gunakan bilah horizontal, sering disebut sebagai "garis horizontal", untuk memperbarui
header situs web secara visual. Tag yang digunakan adalah "hr". Atribut tersebut termasuk ALIGN,
SIZE, dan WIDTH. Bersama dengan tag br (<br>), tag hr adalah tag referensi langsung. Oleh karena
itu, tag penutup tidak perlu digunakan.

20
 Gambar 2.10 Contoh Sintak Membuat Horizontal Line

Hasilnya :

Gambar 2.11 Hasil Contoh Sintak Membuat Garis Horizontal

2.3 LIST HTML

Dalam HTML, terdapat 3 jenis tag list istilah, yaitu berurutan (ordered list) , tidak berurutan
(unordered list) dan definition list.
a) Ordered list akan ditampilkan menggunakan huruf atau angka dan menggunakan tag "<ol>",
sedangkan tag "<li>" akan digunakan untuk daftar itu sendiri. Ordered list mempunyai atribut type
untuk mengganti tipe list yaitu 1, A, a, I, i. contoh :
b) Unordered list ditampilkan dengan sebuah lingkaran atau persegi dan menggunakan tag <ul>,
sedangkan untuk list sendiri menggunakan tag <li>. Unordered list mempunyai atribut type untuk
mengganti tipe list yaitu disc, circle, square, none. Contoh :
c) Definition list menampilkan daftar formulir dengan deskripsi masing-masing formulir. Tag "<dl>"
dan "<dt>" mendefinisikan deskripti dokumen, "<dt>" mendefinisikan nama institusi, dan "<dd>"
mendeskripsikan masing-masing institusi; namun, tag "<li>" digunakan untuk mendefinisikan
daftar itu sendiri.
Perhatikan contoh di bawah ini agar lebih mudah memahaminya.
21
 Gambar 2.12 Contoh Sintak Membuat List

Hasilnya dapat dilihat pada gambar berikut ini:

22
 Gambar 2.13 Hasil Contoh Sintak Membuat List

2.4 HTML IMAGES

Tag img digunakan untuk meletakkan gambar dalam dokumen HTML dan terlihat seperti ini:
Menurut standar teknis, gambar tidak ditambahkan ke database situs web; sebaliknya, mereka hanya
ditambahkan ke database situs web. Tag img membuat ruang kosong tempat gambar yang relevan
dapat ditampilkan.
Tag <img> memiliki beberapa atribut yang di gunakan :
• Src : Digunakan untuk memberi tahu browser tempat untuk menemukan gambar
• Alt : Memberikan informasi teks alternatif untuk gambar
• Title : Memberikan Nama pada gambar pada saat cursor berada di wilayah gambar
• Width : Menentukan lebar gambar, ukuran gambar default (px) pixcel dan persen (%)
• Hight : Menentukan tinggi gambar, ukuran gambar default (px) pixcel dan persen (%)
Penulisan tag img External :

Penulisan tag <img> Internal

23
 Gambar 2.14 Contoh Sintak Menyisipkan Gambar

Gambar 2.15 Hasil Contoh Sintak Menyisipkan Gambar

24
LATIHAN MANDIRI
1. Buatlah sintac HTML untuk menampilkan tulisan seperti berikut ini

CO2
X2 + 6x + 6
Windows merupakan salah satu contoh Operating System

2. Buatlah sintac HTML untuk menampilkan pesan seperti berikut ini

Daftar Nama Mahasiswa Kelas Pemrograman Web

• Pria
1. Dendy Kurniawan
2. Antariksa Wibawa
• Wanita
1. Erinda Anasia Agustin
2. Safira Berliana Putri

25
 BAB 3
HYPERLINK & FORM PADA HTML

TUJUAN :
a. Mahasiswa dapat menge-link-kan halaman antar dokumen HTML.
b. Mahasiswa mampu membuat tautan ke tujuan tertentu dari sebuah dokumen HTML.
c. Mahasiswa dapat membuat form pada dokumen HTML
d. Pengguna memahami cara menggunakan fungsionalitas formulir di header dokumen
HTML
e. Mahasiswa dapat menyisipkan field sesuai dengan tujuan penggunaannya.
Overview :
Salah satu keunggulan aplikasi berbasis web adalah dapat menghubungkan satu dokumen dengan
dokumen yang berada di server yang berbeda, baik yang berada di server yang sama maupun server
yang berbeda. HTML memungkinkan Anda melakukan "interaksi yang lebih luas" dengan dokumen itu
sendiri. Misalnya, kemampuan dokumen HTML dapat menyediakan fasilitas input atau pengiriman
pengguna. Informasi ini dapat diolah lebih teliti menjadi informasi yang sangat dibutuhkan oleh
pengunjung situs maupun organisasi pengelola situs tersebut. Teknik pengisian ini menggunakan
bentuk elemen.

26
3.1 HYPERLINK HTML
Elemen utama HTML adalah tautan, sering dikenal sebagai tautan hypertext, hyperlink, atau
lebih dikenal sebagai tautan. Dengan hyperlink ini, Anda dapat membuka lebih banyak dokumen HTML
atau mengarahkan langsung ke dokumen HTML yang diinginkan. Hyperlink ini dapat diaktifkan pada
teks tertentu atau bahkan gambar, namun jika diaktifkan pada teks, teks akan ditampilkan dengan cara
yang berbeda dan peringatan akan berubah (secara default).Tag yang di gunakan adalah tag <a> yang
mempunyai arti anchor atau jangkar.

Tabel 3.1 Atribut Dalam Hyperlink

Penulisan External Link :

Penulisan Internal Link :

Penulisan Relatif Link atau berbeda Folder penyimpanan :

Untuk menggunakan tautan yang akan mengarah ke badan dokumen, klik di sini.

“#nama_section” menjadi

Dengan ketentuan kita harus memberikan Id terlebih dahulu.

Contoh : buat 3 file html berikut ini

27
File name : index.html

Gambar 3.1 Sintak index.html untuk Link

Tabel 3.2 Penjelasan Sintak Pada Gambar 3.1

LINE PENJELASAN
Line 7 id=”title” adalah untuk memberikan nama id title pada tag h1 line 7 yang nantinya
dapat di panggil oleh tag <a href = “title”> atau bagian document.
line 9 – 10 pemanggilan internal link file html untuk di tampilkan jika di klik
line 14 – 18 isi pesan yang di tampilkan dari halaman beranda (index.html)
line 19 membuat baris
line 20 memanggil dokumen bagian dengan nama ID footer (ada pada line 25)
line 21 – 24 berisi enter untuk membuat halaman menjadi panjang (agar bisa di scrall untuk
menunjukan pemanggilan dokumen ke bagian) Anda dapat mengisi bagian ini dengan
article / text apapun
line 25 seperti line 7, berguna untuk memebrikan nama ID footer pada tag div line 25
line 26 &copy membuat symbol ©, memanggil external link stekom.ac.id dengan nama
Universitas Stekom, target=_blank untuk membuka link di new tab
line 28 Memanggil dokumen bagian dengan nama ID title (ada pada line 7) Selanjutnya Anda
harus membuat file contact.html dan about.html agar ketika link yang ada di
index.html di klik, akan mengarah ke file yang dituju. Jika nama file salah atau file
belum di buat maka akan di tampilkan halaman berikut ini

28
 Gambar 3.2 Contoh Saat Halam Belum di Buat

File Name : contact.html

Gambar 3.3 Sintak contac.html untuk Link

Penjelasan masing – masing line source code, sama dengan penjelasan file index.html.
namun ada tambahan api pada line 17 yang fungsinya mindirect ke WA nomer tersebut untuk
mengirim pesan “Saya tertarik dengan Web Anda”. setelah ini Anda membuat file about.html

29
 File name : about.html

Gambar 3.4 Sintak about.html untuk Link

Penejelasan seperti file index.html. Silahkan jalankan file html tersebut dengan web
browser yang ada di computer Anda. Coba persatu tombol Beranda, Contact, About yang ada di header
serta tombol scrall ke atas, scrall ke bawah yang ada pada halaman beranda dan tombol universitas
stekom yang ada pada footer masing – masing halaman web tersebut. Catatatn : letakkan 3 file
tersebut ke dalam 1 folder yang sama

Gambar 3.4 Peletakan ke Tiga File untuk Link

3.2 FORM
Dalam HTML, formulir adalah bagian dari konten yang berfungsi sebagai kolom input atau
sebagai permintaan pengguna; itu akan segera dihapus atau diubah agar dapat digunakan sesuai
kebutuhan. Pertimbangkan prosedur transfer data, browsing, hapus, penguncian data, dan yang
serupa lainnya. Prosedur pengisian formulir HTML dijelaskan di sini.

30
 "Nama Formulir" mengacu pada nama formulir yang sekarang digunakan, "Metode" mengacu
pada metode atau sarana yang digunakan untuk mentransfer data ke server, dan "Action" mengacu
pada alamat atau file lain yang digunakan untuk menerima input dari form di server.

a) MEDIA INPUT DALAM FORM

Salah satu kegunaan pembuatan media inputan adalah untuk membantu user agar lebih
mudah dalam memasukan data kedalam halaman web. Media inputan terdiri dari Kontrol berupa
text, radio button, checkbox, dropdown list dan button.
1) KONTROL BERUPA TEXT
Menggunakan dua textarea dan input tag anak, formulir HTML dapat digunakan untuk
memasukkan informasi berbasis teks. Tag input digunakan untuk memasukkan teks yang
hanya berisi satu bar, sedangkan tag textarea digunakan untuk memasukkan teks yang
memiliki beberapa baris.

Hasilnya :

Didalam text area terdapat beberapa atribut yaitu

• Name, digunakan untuk memberi nama pada tag textarea
• Id, digunkan untuk memberi nama pada textarea
• Cols, digunakan untuk menentukan panjang dari textarea
• Rosw, digunakan untuk menentukan tinggi dari textarea

Dengan menggunakan properti height dan width CSS, Anda juga dapat mengubah
margin kiri dan kanan textarea.
Meskipun dapat menampung jumlah kata yang banyak, textareas tidak dapat digunakan
untuk semua situasi entri data. Biasanya menginginkan pengguna untuk memasukkan data
satu digit dari sejumlah besar teks. Anda dapat menggunakan elemen masukan untuk jenis
masukan seperti :

Hasilnya :

31
 Ketahuilah bahwa elemen ini akan menggunakan tipe atribut untuk menunjukkan tipe
data yang akan didistribusikan. Ada banyak tipe data yang bisa diakses, dan browser akan
mencocokkan tipe teks yang tersedia dengan atribut yang Anda tentukan. Mendefinisikan
istilah untuk jenis atribut meliputi:

2) KONTROL BERUPA RADIO BUTTON

Tombol radio digunakan untuk menunjukkan pilihan dengan komponen emosional
yang kuat. Biasanya digunakan di situs web untuk pertanyaan komprehensif seperti yang
ditanyakan saat pendaftaran online, pilihan ini biasanya berkaitan dengan keyakinan
seseorang dalam hal agama, politik, atau topik lainnya.
Tombol radio dibuat menggunakan input elemen HTML dan atribut ndengan type :
`radio`

yang akan menghasilkan elemen masukan seperti berikut:

Dalam proses pembuatan tombol radio elemen, dua atribut lainnya—nama dan nilai—
harus ditentukan. Atribut nama digunakan untuk memberi tahu browser bahwa tombol radio
tertentu milik grup tombol radio tertentu, sehingga pengguna tidak dapat memilih dua opsi
untuk tombol radio yang dipilih.

3) KONTROL BERUPA CHECKBOX

Berbeda dengan tombol radio yang hanya memungkinkan pengguna memilih satu
opsi, kotak yang menyala memungkinkan pengguna memilih satu, beberapa, atau tidak
ada opsi sama sekali. Ini biasanya digunakan untuk mengumpulkan data operasional
berkualitas tinggi. Anda dapat menggunakan "Centang kotak" untuk masking atribut.
Kotak centang input adalah alat untuk memilih opsi atau pilihan tertentu. Jika Anda
mengisinya, pengguna akan memeriksanya (mencentang), dan jika tidak, Anda hanya akan
mendapatkan peringatan sederhana.
Mirip dengan tombol radio, elemen ini dibuat menggunakan elemen input yang jenis
atributnya menentukan kotak centang.

32
 Sintax diatas akan menghasilkan elemen masukan seperti berikut:

4) KONTROL BERUPA DROPDOWN LIST

Penciptaan dua komponen menu drop-down, pilih dan opsi, dilakukan. Elementselect
menyertakan semua opsi elemen yang tersedia untuk membuat menu drop-down. Elemen
sebenarnya dari opsi adalah pengidentifikasi dropdown yang diinginkan. Perhatikan kode
di bawah ini:

Yang menghasilkan

Jika kita menambahkan atribut multiple

Maka akan menghasilkan tampilan

b) BUTTON
Kontrol input bertipe button pada HTML mewakili tombol yang dapat diklik, yang biasanya
digunakan untuk mengirimkan formulir ke alamat tujuan atau action dalam form.
1) Submit
Tujuan tombol ini adalah menampilkan URL yang telah disetujui untuk tindakan atribut.
Pembuatan tombol submit juga melibatkan penggunaan elemen input, yang jenis atributnya
diidentifikasi oleh nomor submit, seperti yang terlihat di bawah ini:

33
 Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Reset
Tombol ini bertujuan untuk mengirim form ke tahap awal (mengosongkan nilai semua elemen
yang ada pada form). Mirip dengan kirim tombol, pembuatan tombol dilakukan dengan kondisi
yang sama, tetapi dengan nilai tipe atribut yang berbeda yang ditunjukkan oleh tombol reset
pada tombol saat ini.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

c) ORGANISASI ELEMEN FORM

HTML juga menyediakan elemen yang dapat digunakan sebagai penanda elemen yang
digunakan dalam formulir untuk memberikan informasi kepada pengguna. Label, fieldset, dan
legend adalah satu-satunya elemen yagn yang dapat digunakan untuk tujuan ini.
1) Label
Label elemen menawarkan kemampuan untuk melampirkan teks ke label dengan
menggunakan formulir elemen. Unsur dalam kalimat ini ditentukan oleh deskripsi yang
dimaksudkan dari atribut kalimat itu. Atribut untuk label elemen memiliki nilai numerik yang
sama dengan id atribut untuk formulir pengiriman elemen. Nilai serupa akan menyertakan
elemen input dan label yang disorot, memungkinkan pengguna mengklik teks yang telah
disediakan oleh elemen label untuk menghasilkan nilai.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Fieldset
Element fieldset adalah alat yang digunakan untuk mengelompokkan sejumlah elemen yang
berhubungan dengan bentuk untuk menunjukkan bahwa masing-masing elemen ini adalah
bagian dari satu grup atau jika tidak terhubung.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

34
 3) Legend
Legenda elemen digunakan untuk memberikan fieldset dengan judul. Penggunaan
elemen legenda sangat mudah dan hanya perlu mengacu pada elemen sebagai anak pertama
dari fieldset, seperti yang terlihat di bawah ini:

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

d) VALIDASI MASUKAN FORM

Validasi formulir digunakan untuk memeriksa keakuratan data yang dimasukkan ke dalam
formulir. Misalnya, jika kami ingin memvalidasi bahwa bidang email dalam formulir memerlukan
alamat email, kami memerlukan pengguna untuk memasukkan alamat email dalam format yang
valid. Jika pengguna memasukkan alamat email dalam format yang tidak valid, pesan kesalahan
akan muncul di lapangan dan data tidak dapat diproses. Validasi formulir memastikan bahwa
browser dapat mengeksekusi data yang dimasukkan pengguna dalam format yang konsisten
dengan yang ditentukan dalam standar HTML.

1) Atribut requied
Atribut ini digunakan untuk mengidentifikasi bahwa form harus diisi. Jika pengguna
tidak mengisikan form yang sudah ada atribut ini maka akan tampil pesan peringatan.

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

2) Atribut maxlength
Atribut ini digunakan untuk mengatur berapa jumlah karakter yang dapat di input
form. Penggunaanya kita harus menambahkan atribut maxlength dan menentukan value yang
merupakan jumlah max karakter inputan.

35
 Sintax diatas akan menghasilkan elemen masukan seperti berikut:

3) Atribut type : |number|url|email|

Penggunaan atribut type mempunyai fungsi bermacam macam, jika kita menginginkan
form hanya bisa diisi dengan angka saja maka gunakan number pada typenya. Jika kita
menginginkan yang diisikan tipe url atau email, ganti dengan url atau email. Sebagai contoh
perhatikan sintaks di bawah ini:

Sintax diatas akan menghasilkan elemen masukan seperti berikut:

Contoh Membuat Form :

Form.html

36
Hasilnya :

37
Gambar 3.5 Hasil dari form.html

38
 BAB 4
MEMBUAT TABEL & LAYOUT WEB PAGE

TUJUAN :
a. Pengguna dapat membuat dan memformat tabel dalam dokumen HTML.
b. Pengguna dapat memahami cara membuat bingkai dalam dokumen HTML.
c. Pengguna dapat memahami cara menggunakan frame yang dimaksud.
d. Mahasiswa dapat menyesuaikan batasan frame.
e. Mahasiswa mampu mengenali target sel frame dari hyperlink.

Overview :
Tabel adalah metode untuk menampilkan informasi di header situs web dalam format baris dan kolom.
Hampir setiap situs web dengan kualitas dan profesionalisme tinggi perlu dianalisis menggunakan
tabel. Mirip dengan spreadsheet yang memiliki kolom dan berformat angka-angka, tabel online
memiliki kolom yang berformat link, gambar, dan teks.

Saat membuat situs web, penggunaan tabel dan bingkai dimungkinkan. Secara umum, tidak ada
perbedaan yang sangat signifikan dalam situasi ini, tetapi selama pembuatan waktu akses situs web,
kemungkinan hal ini akan menjadi sangat jelas dalam kaitannya dengan waktu respons yang
diperlukan.

Frame akan dapat mengubah satu dokumen HTML menjadi beberapa dokumen HTML. Meskipun
demikian, setiap bagian tertaut ke dokumen HTML yang valid.

39
4.1 TABEL
Tabel digunakan untuk menampilkan data dalam format kolom dan bar. Padahal, setiap kolom
memiliki data yang sejenis, dan setiap baris yang ditempatkan pada sebuah kolom mencakup data
yang telah disusun menjadi satu kesatuan. Setiap tabel memiliki judul, tempat bagi Anda untuk
menunjukkan peringatan atau kode bar yang sedang digunakan, bar untuk informasi, dan sel
untuk setiap item. Kolom pertama pada tabel di bawah berisi informasi tentang header; setiap
baris mengubah tag HTML untuk tabel; dan setiap kolom mengubah fungsi atau tujuan dari
sebuah tag. Elemen yang sering digunakan dalam membuat tabel HTML dibahas di bagian ini.
Elemen tabel> HTML membuat data tabular dengan menyajikan informasi dalam tabel dengan
dua dimensi yang terdiri dari sel berisi data dan kolom teks. Ada beberapa tag yang harus
dipahami sebelum membuat tabel HTML:
• <table> pembungkus tabel
• <thead> pembungkus kepala tabel
• <tbody> pembungkus body tabel
• <tfoot> pembungkus kaki tabel
• <tr> “tabel row” membuat baris di tabel
• <td> “table data” membuat sel di tabel
• <th> “table head” membuat judul pada header tabel

Selain itu juga terdapat Tag Atribut yang dapat digunakan untuk mengatur tabel didalam html,
berikut ini contoh Tag atribut yang dapat di gunakan :
• Align=left | Center | right, digunakan untuk mengatur posisi tabel
• Width, Atribut digunakan untuk menentukan lebar yang diinginkan dari seluruh table, jika
atribut tidak ada , lebar table ditentukan oleh data
• Colspan, Atribut digunakan untuk meggabungkan kolom
• Rowspan, Atribut digunakan untuk menggbungkan baris
• Bgcolor, digunakan untuk memberikan warna pada table.
• Border, digunakan untuk menentukan lebar garis
• Caption, digunakan untuk membuat judul dari table.

Bentuk penulisan tag Table pada Html dapat diihat pada contoh di bawah ini:
table.html

40
 Haslinya jika di tampilkan pada browser

Gambar 4.1 Hasil Syntac table.html

a) Fungsi Tag Caption

Tujuan dari Tag Caption adalah untuk membuat judul tabel. Elemen tersebut terletak di dalam
tabel elemen dan memiliki atribut yang disejajarkan dengan bagian atas dan tombol. Bentuk
penulisanya:

b) Fungsi Tag Th
Baris pertama yang kita gunakan saat membuat tabel adalah sebagai judul baris berikutnya di
bawahnya. Biasanya, tabel pertama dalam skenario ini memiliki perbedaan visual dari tabel kedua
agar lebih menonjol, misalnya dengan menggunakan font atau warna yang berbeda.
HTML memiliki tag khusus yang dapat digunakan untuk keperluan ini, yang dikenal dengan tag
"<th>" (singkatan dari table head). Untuk menggunakan tag th, yang harus dilakukan adalah
mengganti tag td dengan th pada kolom pertama tabel.
Anda dapat melihat contoh penggunaan tag "<th>" dan atribut "align", "rowspan and colspan",
dan "caption" pada gambar di bawah ini.

41
Tag.html

42
 Hasilnya akan seperti pada gambar di bawah ini

Gambar 4.2 Hasil dari syntac tag.html

c) Tag Thead, Tbody dan Tfoot

Pada tag html juga di sediakan tag yang digunakan untuk membedakan antara bagian header
table, body table dan footer table. Tag <thead> digunakan unutk membungkus kepala table yang
biasanya berisi judul dari masing masing fild yang di buat, Tag <tbody> digunakan unutk
membungkus badan atau body table, yang berisi isi utama dari dari sebuah table. Tag <tfoot> Tag
untuk membungkus bagian footer dari table, yang berisi kesimpulan atau penjumlahan dari table
yang telah dibuat. Sebagai contoh lihat Latihan berikut:
thead.html

43
44
 Gambar 4.3 hasil dari sintac thead.html

Elemen thead, tbody, dan tfoot digunakan untuk menyorot konten atau elemen yang
terlihat masing-masing di bagian atas (head), bawah (foot), dan tengah (body) dari tabel
tertentu.
Saat digunakan, elemen <thead> digunakan bersamaan dengan elemen <tbody> dan
<tfoot> yang masing-masing menentukan bagian atas (tubuh) dan bagian bawah (kaki) dari tabel
tertentu.
Tidak ada atribut khusus yang tersedia untuk elemen "<tbody>" di HTML5, meskipun
beberapa atribut, termasuk align, bgcolor, char, charoff, dan valign, tersedia di HTML4.01.
Namun, atribut tersebut sudah digunakan, dan Anda sebaiknya hanya menggunakan CSS untuk
memodifikasi elemen <tbody>.

4.2 FRAME
Dengan menggunakan framing pada HTML, dimungkinkan untuk membuat dokumen HTML
dari tampilan file HTML yang telah dibagi menjadi beberapa bagian, dengan setiap bagian berisi
satu atau beberapa bagian yang bertentangan satu sama lain. Ini memungkinkan penggunaan
bandwidth internet yang efisien dan kelancaran proses pengunduhan. Berikut adalah contoh
sintaks pembuatan frame standar yang sering digunakan.

45
Tabel 4.1 Atribut yang digunakan dalam frame

Dengan memanfaatkan frame ini, kita dapat menentukan tampilan layout website kita lebih
mudah dan rapi. Contoh layout web :

Gambar 4.4 Contoh Layout Web

Dan yang akan di praktikan dalam modul ini adalah layout seperti di bawah ini

46
 Gambar 4.5 Contoh Layout yang Akan di Buat

Terdapat enam bagian pada layout yang akan di buat di antaranya : header, menu, konten, sidebar
1, sidebar 2 dan sidebar 3. Masing – masing halaman dokumen kita buat file html sendiri – sendiri.
Silahkan simpan file dokumen html yang akan di buat di bawah ini di satu folder yang sama

1. header.html

Keterangan :
- &nbsp adalah syntac yang di gunakan untuk memberikan sepasi pada html

47
- Marquee adalah alat dalam HTML yang memungkinkan teks bergerak atau berhenti
bergerak. Atribut apa saja yang dapat dituliskan pada sebuah marquee dapat dilihat pada
tabel 4.2 berikut ini :
Tabel 4.2 Atribut Marquee
NAMA ATRIBUT KETERANGAN VALUE
width mengubah lebar teks Pixel dalam %
height mengubah tinggi teks Pixel dalam %
Left
Mengubah arah dari Right
direction
gerakan teks Up
down
Slide: Teks bergerak sekali lalu
berhenti Scroll: Teks bergerak
berputar
behaviour Mengubah gerakan
frasa yang berbeda adalah: teks
bergerak dari kiri ke kanan lalu
berulang
mengubah waktu Value
scrolldelay tunda gerakan dalam
mili detik
mengubah r kecepatan Value dalam pixel
scrollmount
gerakan
mengubah warna latar color
bgcolor
belakang teks
mengubah jumlah Value
Loop -1
perulangan
infinite
mengubah ruang Value
Vspace antara atas/bawah
dengan teks
mengubah ruang Value
Hspace antara kiri/kanan
dengan teks

Teks berjalan dari kanan ke kiri:

Teks dengan atribut behaviour:

eksperimen lainnya:

48
 Dan ketika header.html ini di buka pada web browser maka dia menampilkan seperti
berikut ini

Gambar 4.6 hasil header.html

2. menu.html

Keterangan :
- Pada bagian ini hanya membuat hyperlink dengan tampilan teks yang di arahkan atau di
targetkan pada “content”. Nama content tersebut nantinya kita buat denga
menggunakan frame
- Untuk line 11 <a href=”#”> merupakan link buntu yang mana dia membuat link namun
belum aktif atau tidak aka nada respon apa – apa ketika link tersebut di klik
- Jika halaman tersebut di buka dengan web browser maka hasilnya akan seperti di bawah
ini

49
 Gambar 4.7 Hasil menu.html

3. content_beranda.html

Keterangan :
- Anda dapat mengisi halaman content_beranda.html ini dengan sesuka hati Anda.
Hasilnya akan seperti gambar 4.8
- Anda juga dapat membuat dokumen html untuk content – content yang lainnya untuk di
tautkan ke dalam hypelink dokumen menu.html
- Misalkan Anda membuat dokumen content_galeri.html di bawah ini, dan hasilnya seperti
gambar 4.9

- Hanya di bedakan isi nya saja antar content satu dengan content yang lainnya

50
 Gambar 4.8 Hasil content_beranda.html

Gambar 4.9 Hasil content_galeri.html

4. sidebar1.html

Gambar 4.10 syntac dan hasil sidebar1.html

5. sidebar2.html

Gambar 4.11 syntac dan hasil sidebar2.html

6. sidebar3.html

Gambar 4.12 syntac dan hasil sidebar3.html

51
 Setelah membuat 6 dokument html di atas, sekarang saatnya membuat dokumen html fame
yang berfungsi menggabungkan ke 6 dokumen di atas di dalam satu layout web.

7. index.html

Keterangan :
- line 6 : membagi baris menjadi 2 bagian dengan ukuran baris 15% dan baris 2 dengan
ukuran 85% dengan ukuran border = 1
15%

85%

- Line 7 : memberi name=”header” pada baris pertama (15%) dimana name ini nanti dapat
di gunakan untuk target hyperlink. Selain itu pada line 7 ini juga memanggil dokumen
header.html yang sudah kita buat sebelumnya
- Line 8 : membagi kolom pada baris ke dua (85%) menjadi tiga bagian dengan ukuran
masing – masing 10%, 75% dan 20% dengan border = 1

15%

10% 70% 20% 85%

- Line 9 : Memberikan name menu dan memanggil dokumen menu.html untuk di

tampilkan pada bagian layout (ukuran 10% )

52
 - Line 10 : Memberikan name content dan memanggil dokumen content_beranda.html
untuk di tampilkan pada bagian layout (ukuran 70% tadi)
- Line 11 : membagi bagian layout pada baris ke 2 kolom ke 3 (ukuran 20% tadi) menajdi 3
baris dengan masing – masing berukuran 30%

- Line 12 – 14 : Masing – masing memberikan nama sidebar1, sidebar2, dan sidebar3 serta
memanggil dokumen sidebar1.html, sidebar2.html dan sidebar3.html untuk di tampilkan
pada bagian yang telah di atur pada line 11 tadi.

TUGAS MANDIRI 2 :
Tambahkan dokument content_profile.html kemudian silahkan tampilkan biodata diri anda seperti
berikut : (isi data dengan identitas diri Anda masing – masing)

BIODATA DIRI
DATA DIRI KETERANGAN FOTO
Nama Dendy Kurniawan
NPM 12345678
Jurusan Sistem Komputer
Jenis Kelamin Laki – laki
TTL Kendal, 1 Januari 1991
Alamat Jalan Suka Maju No. 57 Kendal
Hobi Programing

Ketentuan :
1. Halaman biodata ini akan tampil di dalam layout saat menu MY PROFILE di klik
2. Untuk bagian header, content beranda, content gallery, sidebar 1- 3 jika Anda modifikasi isi
nya dan di tampilkan lebih menarik, akan mempengaruhi nilai.

53
 BAB 5
PENGENALAN CASCADING STYLE SHEET (CSS)

TUJUAN :
a. Mahasiswa Mampu Memahami dan mengetahui Penggunaan CSS pada HTML
b. Mahasiswa Mengetahui selector dalam CSS
c. Mahasiswa Mengetahui dan mengimplementasi cara Menulis CSS
d. Mahasiswa Mampu mengubah baground dengan CSS
e. Mahasiswa Mampu mengubah Hyperlink dengan CSS
Overview :
CSS (Cascading Style Sheets) adalah lembar gaya khusus bahasa yang digunakan untuk
mengubah format dokumen yang telah diterbitkan menggunakan markup. Pada tahun 1996, CSS mulai
dikenal lebih luas sebagai standar untuk membangun website. Nama CSS berasal dari fakta bahwa
setiap deklarasi hubungan homoseksual yang berbeda satu sama lain dapat dilaksanakan secara
perlahan sebelum menciptakan hubungan antara orang tua dan anak untuk setiap hubungan gay.
Aplikasi CSS yang paling umum adalah memformat halaman web yang ditulis dalam HTML dan
XHTML. Spesifikasi CSS dibuat oleh World Wide Web Consortium (W3C). CSS memungkinkan gambar
identik ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti input
braille, layar, cetak, dan teks (yang dapat dibaca dengan cara berbeda tergantung pengaturan dasar-
suara browser). Dokumen dalam HTML atau XML yang serius juga dapat disajikan secara berbeda, baik
dengan menggunakan jenis font yang berbeda atau skema warna yang berbeda dengan CSS.

54
5.1 OVERVIEW CSS
Singkatan CSS singkatan dari "Cascading Style Sheets." Sesuai dengan namanya, CSS memiliki
definisi “bahasa style sheet” yang mengacu pada bahasa pemrograman yang digunakan dalam desain
web. CSS adalah satu-satunya bahasa pemrograman yang paling banyak digunakan untuk membuat
situs web header. Saat mendesain header situs web, CSS menggunakan id dan penanda yang dapat
dikenali oleh pengguna secara sekilas.
Dalam bidang pemrograman dan teknologi yang berkembang pesat, CSS tidak lagi hanya
digunakan bersamaan dengan HTML dan XHTML, namun masih mampu diterapkan pada
pengembangan aplikasi Android. CSS dapat digunakan menggunakan id, class, atau tag tag, yang
biasanya disebut sebagai "pemilik".
Font, ukuran font, gaya font, dan format font semuanya dapat diubah dengan CSS. Buat tata
letak yang sempit, tinggi, dan ringan, buat situs web yang responsif, ubah bidang formulir, dan lakukan
beberapa tugas lain dengan CSS tetapi saya tidak akan membahasnya secara mendalam dalam
pelajaran mempelajari prinsip-prinsip CSS ini.
Margin dapat digunakan untuk mengubah ukuran font, warna dapat diubah untuk mengubah
warna huruf, dan definisi font dapat diubah untuk mengubah jenis huruf. Menggunakan "latar
belakang" dapat digunakan untuk memindahkan teks atau gambar lebih jauh dari penampil. Gunakan
"ukuran font" untuk mengubah ukuran font. jenis font yang menggunakan "font-family" dan beberapa
gaya font lainnya.
a) Selector

Gambar 5.1 Selector CSS

Karena CSS digunakan untuk mengelola atau bahkan memodifikasi konten HTML, diperlukan
metode untuk "gaiting" atau menghubungkan kode CSS dengan tag HTML yang sesuai. Dalam CSS,
inilah yang dimaksud dengan Selector.
Sesuai dengan namanya, sebuah pemilih dapat digunakan untuk mencari halaman online yang
perlu diubah ukurannya atau ditata. Misalnya, "cari seluh tag <p>", "cari seluh tag HTML yang
memiliki atribut class="warning", atau "cari seluh link yang ada di dalam tag <p>".
CSS paling sederhana untuk digunakan adalah tag dari dokumen HTML standar, seperti tag
<p>, <h1>, <li>, atau dll. Pemilih CSS dapat menjadi objek yang kompleks tergantung pada
kebutuhan pengguna.

1) Universal Selector
Hanya satu pemilih universal tanda "*" yang tersedia di CSS. Selektor Ini dimaksudkan untuk
"mencari" semua tag yang tersedia. CSS Pemilah Universal Contoh:

55
 Kode CSS yang disediakan di sini efektif untuk membuat setiap tag HTML berwarna coklat dan
tampilan latar menjadi hijau. Pada selector universal ini biasanya juga di gunakan untuk
mereset settingan default yang ada pada web browser.

2) Element Type Selector

Sintaks untuk pemilihan yang pada dasarnya adalah tag untuk HTML itu sendiri adalah
Pemilih Jenis Elemen, juga dikenal sebagai Pemilih Tag. Setiap tag HTML dapat digunakan
sebagai pemilih, dan pilihan khusus ini akan mencakup semua tag yang ditemuinya.
Menggunakan Pemilih Tipe Elemen Contoh CSS:

Kode CSS pada contoh ini akan membuat semua tag dengan tag h1 bergerak ke kiri
dan semua tag dengan tag p memiliki lebar 14 piksel. Pengaruh pemilih jenis elemen adalah
dari tag pertama hingga tag terakhir. Jika ada tag I di dalam tag "<p>", maka tag tersebut juga
akan memiliki lebar 14 piksel hingga diikuti oleh tag penutup "</p>".

3) Class selector
Class Selector adalah satu-satunya pemilih yang paling populer dan sering digunakan. Pemilih
Kelas akan "mencari" setiap tag yang memiliki atribut kelas dengan nilai yang sesuai. Untuk
menggunakan Pemilih Kelas, Anda harus memiliki tag HTML dengan atribut kelas. Contohnya:

Ingatlah bahwa kita menambahkan nama kelas itu sendiri sebagai kelas atribut untuk setiap
tag pada daftar di atas. Nama kelas dapat diberikan oleh lebih dari satu tag, dan sebuah tag
dapat mencakup lebih dari satu kelas. Misalnya pada paragraf terakhir dari contoh di atas, tag
h2 memiliki atribut class="judul penting berwarna". Tag ini terdiri dari tiga kelas: judul,
penting, dan kelas berwarna.
Sebaliknya, kode Pemilih Kelas CSS adalah sebagai berikut:

56
 Di CSS, pemilih kelas diterapkan dengan memberi tanda centang di depan nama kelas. Sebagai
contoh kita, setiap kelas yang memiliki nilai "paragraf pertama" akan menyebabkan teks
menjadi merah. Dan setiap judul kelas akan memiliki jenis huruf 20 piksel.

4) ID Selector
Selector yang paling dasar dan sering digunakan adalah ID Selector, yang bekerja
berdampingan dengan class Selector (walaupun tidak sesering class selector). Penggunaan
pemilih ID hampir identik dengan penggunaan pemilih kelas, kecuali bahwa dengan pemilih
kelas, atribut seperti kelas digunakan untuk mengidentifikasi tag HTML, dengan pemilih ID,
atribut seperti id digunakan. Contoh penggunaan ID atribut dalam tag HTML:

Selain digunakan sebagai pemilih CSS, atribut id juga berfungsi sebagai tag unik untuk masing-
masing tag (terutama dipakai untuk kode JavaScript). Karena itu, setiap ID yang digunakan
harus unik dan tidak boleh sama dengan yang lain. Dengan kata lain, sebuah ID hanya boleh
digunakan satu kali di dalam satu halaman web dan tidak boleh sama. Contoh penggunaan
kode pemilih id pemilih kelas CSS adalah sebagai berikut:

Di CSS, kami menggunakan tanda hash "#" untuk menunjukkan bahwa kami sedang mencari
tag dengan id tertentu.

57
 5) Attribute Selector
Dibandingkan dengan selektor-selektor sebelumnya, selektor ini sedikit lebih rumit.
Pemilih atribut ini digunakan untuk menemukan setiap tag dengan atribut yang telah diformat
dengan benar. Konteks penggunaan pemilih atribut CSS adalah sebagai berikut:

Seperti yang terlihat dari contoh di atas, setiap atribut yang digunakan harus
ditempatkan di antara tanda kurung "[" dan "]". [href] akan berfungsi dengan semua tag yang
memiliki atribut bernama "href", terlepas dari nilainya (yang biasanya ditemukan pada tag
"<a>"). Misalnya, [type="kirim"] Ini akan berfungsi dengan tag yang memiliki atribut dengan
nilai kirim, yang dalam hal ini akan berfokus pada tombol kirim formulir. Meskipun memiliki
kemampuan untuk mengidentifikasi tag yang cukup spesifik, atribut ini sering digunakan.

b) Property
Properti CSS adalah elemen atau gaya yang akan dipisahkan dari tag HTML. CSS memiliki
beberapa properti yang dapat diterapkan untuk menghasilkan hasil akhir yang kita inginkan.
Hampir setiap properti CSS dapat diterapkan ke semua pengguna.
Jika pemilih digunakan, misalnya, untuk "menemukan setiap tag <p>", maka propertinya
adalah "apa pun yang ingin Anda ekstrak dari tag <p> itu", seperti ukuran teks, warna, dan jenis
font.

c) Value
Nilai CSS adalah ukuran properti. Misalnya, nilai atau ciri properti backgroundcolor, yang
digunakan untuk mengubah warna latar belakang suatu pilihan, dapat berupa kombinasi merah,
biru, hitam, atau putih.

5.2 PENEMPATAN CSS

CSS menggunakan pemilih (id dan kelas) untuk mengidentifikasi elemen yang akan dimodifikasi atau
menerima pesan CSS. Jika HTML dianggap sebagai tiang pada bangunan rumah tertentu, maka CSS
berfungsi sebagai dekorasi dan aksen pada bangunan rumah tersebut. Ada tiga teknik
pengembangan CSS, yaitu:
o Inline CSS Style
o Internal CSS Style
o External CSS Style

58
Pada pelajaran kali ini, kita akan membahas dan mempelajari tiga teknik penulisan CSS (inline dan
internal).

a) In Line Style
Pengkodean sintaks gaya inline adalah teknik pengkodean sintaks CSS yang tidak memerlukan
penyeleksi (id dan class). Oleh karena itu, sintaks CSS digunakan baik secara eksplisit maupun
implisit untuk elemen HTML. Sintaks CSS diimplementasikan dalam atribut style=" ".
Contoh gaya CSS sebaris:
Untuk membuat contoh penulisan CSS dengan gaya inline dapat menyediakan file HTML. Langkah
awal buatlah HTML file dengan diberi nama index.html.
index.html

Perhatikan contoh di bawah ini. Sintaks CSS diterapkan ke elemen h1 melalui atribut style=” ”.
Properti CSS yang disebut warna memiliki fungsi mengubah font yang digunakan untuk peringatan.
Akibatnya, dalam contoh gaya CSS sebaris ini, tajuk h1 dibuat menggunakan jenis huruf yang
diubah menjadi peringatan birch (Biru).
Dan ketika peluncuran selesai, hasilnya adalah sebagai berikut:

Gambar 5.2 hasil dari index.html in line style

b) Internal / Embedded CSS Style

Penyisipan Sintaks Gaya Internal adalah teknik implementasi CSS yang memungkinkan
integrasi file tunggal dengan file HTML atau PHP. Sintaks CSS dijelaskan dalam tag gaya dan
diakhiri dengan tag /style>. Faktanya, tag HTML ditempatkan di dalam tas tag.
CSS Internal Contoh Gaya

59
 Perhatikan contoh penataan CSS internal di atas. sintaks css digabungkan dengan html dalam
file yang sama. Sintaks CSS diimplementasikan dalam tag gaya. Padding CSS untuk sintaks memiliki
fungsi menyorot teks di dalam saudara elemen. Dalam contoh ini, kami memberikan batas sekitar
10 piksel atau 10 piksel. CSS mengelola kelas pemilih dengan awalan "." dan mengelola id pemilih
dengan awalan "#."

Gambar 5.3 hasil dari index.html internal embedded CSS style

c) External Style
Sintaks CSS dengan Gaya Eksternal adalah teknik penulisan yang dapat bekerja dengan file
CSS dan HTML. Cara terbaik untuk menggunakan CSS adalah dengan menggunakan teknik
penulisan ini karena ini mencegah kode program kita rusak karena sintaks untuk CSS ada di file
yang sama dengan kode kita. File CSS dan HTML ditautkan bersama menggunakan gaya
eksternal (contoh CSS):

Untuk membuat contoh CSS menggunakan gaya eksternal, gabungkan satu file html dengan satu
file CSS. Pada bagian ini, saya telah membuat sebuah file dengan memberi nama yaitu index.html
beserta style.css.

60
 Gambar 5.4 Contoh file html dan CSS
index2.html

style.css

Jika di buka hasilnya akan seperti di bawah ini

Gambar 5.5 Eksternal CSS

5.3 MEMULAI CSS

a) MENGUBAH BAGROUND DENGAN CSS
Background atau batas bawah header website hanyalah dua elemen yang harus didesain agar
menghasilkan header website yang terlihat tajam dan kekinian. Ada berbagai metode untuk
mengubah latar belakang situs web atau tajuknya. Memanfaatkan gambar sebagai latar belakang
61
situs web dimungkinkan. Jika menggunakan gambar bukan yang Anda inginkan, Anda juga dapat
mengubah warna tampilan latar menggunakan CSS jika Anda tidak ingin menggunakannya.
Gunakan properti latar belakang CSS untuk mengubah warna latar belakang. Selain digunakan
untuk mengubah backdrop body website, properti background juga dapat digunakan untuk
mengubah gambar background dari elemen HTML tertentu.

Cara mengganti background dengan css

Dalam pelajaran CSS, metode untuk menghapus latar belakang menggunakan CSS akan dibahas.
cara menghilangkan background dengan css. Lanjutkan proses memodifikasi CSS untuk header.
buat file HTML baru dengan nama unik Anda sendiri. Di lokasi ini saya membuatnya dengan nama
index3.html. lalu buat file CSS dengan nama yang sama seperti Anda, tetapi saya sudah
memberinya nama style3.css dalam contoh ini.
1. Mengubah warna background dengan CSS
Perhatikan informasi di bawah ini tentang cara mengubah warna latar belakang
menggunakan CSS.
Index3.html

style3.css

62
 Hasilnya

Gambar 5.6 Mengubah Warna Background

Pada kode CSS diatas, kita menentukan body yang akan dimodifikasi. Kami kemudian menentukan
warna latar belakang menjadi biru (biru), dan warna font menjadi putih (putih).

2. Mengubah gambar background dengan CSS

Akan dijelaskan pada bagian berjudul "Mengubah Tampilan Website dengan CSS" cara
menggunakan gambar untuk mengubah tampilan header website. Untuk melakukannya,
Anda harus menyediakan file grafik untuk digunakan sebagai gambar latar situs web. Dalam
hal ini, saya memberikan gambar menghadap ke belakang yang akan saya gunakan sebagai
foto sepia. Untuk mencegah hal ini terjadi, tempatkan file gambar dalam satu folder dengan
file html dan CSS. Nama file gambarnya adalah stekom.png.

Gambar 5.7 File html gambar dan css

index4.html

63
 style4.css

Perhatikan sintaks CSS di atas. Gunakan sintaks berikut untuk membuat gambar latar:
background: url('stekom.png');
Hasilnya

Gambar 5.8 Mengubah Background dengan gambar

The game has successfully been used as a backdrop halaman. Silahkan ber Eksperimen di
rubah nilai pixel atau mengganti tempat penyimpanan style.css dan juga mengganti warna
serta gambar baground dari tutorial diatas.

b) HYPERLINK DENGAN CSS

Hyperlink dibuat untuk mengubah halaman target saat diklik. Dalam HTML, hyperlink atau
kalimat dibuat dengan tag "a" dan diakhiri dengan tag "/a". Dan menggunakan CSS untuk
membuat, memodifikasi, atau membuat hyperlink cukup sederhana. Dalam kursus pembelajaran
CSS ini, prosedur pembuatan hyperlink yang disempurnakan dengan CSS akan dibahas. Lanjutkan
dengan menambahkan peringatan pada tautan, mengubah bentuk tautan menjadi tombol,
membuat teks hyperlink menjadi kuning saat diklik, dan seterusnya.
Ada dua status yang dikontrol oleh HTML dan dapat diubah menggunakan CSS. Yaitu:
Link : Ini adalah koneksi default yang aktif.
Visited : ini adalah status link yang sudah dibuka.
Hover : adalah status tautan saat penunjuk mouse digerakkan di atasnya.
Active : status tautan atau hyperlink saat diklik.

Sebaliknya, status penggunaan atau pemeliharaan tautan dapat dinyatakan menggunakan

sintaks berikut:
64
➢ a:link = untuk link biasa
➢ a:visited = mewakili status tautan yang baru saja diklik.
➢ a:hover = Saat mouse digerakkan di atas tautan, status tautan itu ditunjukkan oleh
atribut.
➢ a:aktif = Status tautan atau hyperlink saat diklik ditunjukkan dengan atribut.

Contoh
index.html

style.css

Hasil ketika tidak ditunjuk kursor

Gambar 5.9 Hyperlink dengan CSS

Ketika di tunjuk kursor

Gambar 5.10 Hyperlink dengan CSS ketika di hover cursor

Silahkan Anda coba di bawah ini

65
index2.html

style2.css

Amatilah hasilnya dan silahkan bereksperimen mengganti value dari masing – masing style nya.

66
 BAB 6
MENGATUR FONT, FORMAT TEKS, MENGUBAH LIST
DAN MENGATUR BORDER DENGAN CSS

TUJUAN :
a. Mahasiswa mampu mengatur font dengan CSS
b. Mahasiswa mampu mengatur format teks dengan CSS
c. Mahasiswa mampu mengubah list dengan CSS
d. Mahasiswa mampu mengubah border dengan CSS

Overview :
Desain web merupakan hal yang sangat penting di pertimbangkan. Semakin bagus desain
yang di berikan, maka konsumen ataupun pengunjung web akan merasa tertarik untuk mengetahui isi
web dan nyaman dalam membuka web tersebut.
Dengan menggunakan CSS kita dapat mengatur font, format teks, mengubah gaya list dan
border seperti yang akan di pelajari dalam BAB 6 disini.

67
6.1 MENGATUR FONT DENGAN CSS
Tutorial saat ini akan menjelaskan cara menyesuaikan jenis huruf menggunakan CSS. seperti
Merubah, hiasan Ukuran, Warn, dan Typefaces (garis miring, huruf tebal, tulisan miring).
Beberapa sintaks CSS yang digunakan untuk mengubah font adalah:

➢ font-size digunakan untuk mengubah ukuran font.

Tabel 6.1 font size

➢ font-weight : digunakan untuk mengubah font pada ketebalan

Tabel 6.2 font weight

➢ font-family : untuk mengubah jenis font (fantasy, inherit, serif, monospace)

Tabel 6.3 font family

Dalam pemilihan font-family Anda juga bisa langsung mengetikkan jenis font seperti pada
pilihan font di MS Office dengan di himpit tanda petik, contoh

➢ font-style : digunakan untuk menulis ulang karakter dalam jenis huruf.

➢ color : digunakan untuk membuat jenis huruf peringatan atau warna huruf.

Berikut terdapat contoh cara mengubah font dengan css.

68
index.html

style.css

Hasilnya dalap dilihat dalam gambar 6.1 di bawah ini

Gambar 6.1 Hasil mengatur font dengan css.

Anda dapat melihat contoh cara mengubah font menggunakan CSS di atas. Anda dapat menggunakan
karakter "color" untuk mengubah warna font, sedangkan "font-family" dan "font-style" digunakan
untuk mengubah jenis font (miring, normal, dan opsi lainnya). Font-size digunakan untuk mengubah
ukuran font. Demikian pula, font-weight digunakan untuk menyorot sisi font tebal.
Note : Anda dapat melihat pilihan di https://www.w3schools.com/css/

69
6.2 FORMAT TEXT DENGAN CSS
Dalam buku ini akan diperlihatkan cara menggunakan CSS untuk memformat atau
memodifikasi teks sehingga akan terlihat seperti yang Anda inginkan dan berfungsi sesuai kebutuhan.
Misalnya, Anda dapat mengubah justifikasi teks menjadi justify atau yang biasa Anda sebut "rat kiri
rata canan", mengubah indent spacing teks menjadi justified, mengubah kursif teks menjadi huruf
besar, huruf kecil, tebal, atau miring, mengubah warna teks menjadi merah, dan ubah desain teks
menjadi ornamental. Silakan baca informasi di bawah ini tentang mengubah format teks yang dapat
dilakukan dengan menggunakan CSS.
Ada satu konstruksi CSS yang dapat digunakan untuk mengubah format teks, yaitu sintaks
beberata.
• color
Apa pun yang dapat ditentukan sebagai peringatan atau kode peringatan digunakan
untuk mengubah teks peringatan.
• text-align
Untuk mengubah perataan teks atau konten lainnya, tersedia nilai berikut: tengah
untuk membuat teks rata tengah, kiri untuk membuat teks rata kiri, kanan untuk membuat
teks rata kanan, dan justify untuk membuat teks rata kanan dan rata kiri.
• text-decoration
Ketika digunakan untuk mengubah dekorasi teks, nilai yang tersedia adalah none
untuk membuat teks tanpa dekorasi, overline untuk membuat teks memiliki dekorasi di pojok
kiri atas, line-through untuk membuat dekorasi yang mencoreng di dalam teks, dan garis
bawah untuk membuat dekorasi di dalam teks. pojok kanan bawah (garis bawah).
• text-transform
When used to change the size of the capital letters in a text, the options available are
uppercase for larger capital letters, lowercase for smaller capital letters, and capitalized for
larger capital letters at the beginning of each word.
• text-indent
Nilai yang dapat digunakan untuk mengubah perataan sebaris teks dapat berupa piksel
atau nilai lainnya tergantung situasi.
• text-spacing
Digunakan untuk mengatur perataan karakter dalam teks, dengan nilai dalam format
isi yang terdiri dari piksel dan nilai lainnya.
• word-spacing
Digunakan untuk mengurangi jarak antar kata dalam teks, nilai isi juga memiliki
gambar jam.
• line-height
Digunakan untuk mengubah spasi bar-to-bar pada nilai teks dengan nilai desimal satu
digit.

70
 • text-shadow
Saat digunakan untuk mengubah warna efek baying teks, nilai yang dipilih pertama
menetapkan nilai jarak di bagian atas, yang kedua menetapkan jarak di bagian bawah, dan
yang ketiga menetapkan peringatan. 2 px kali 5 px biru sebagai contoh.
• vertical-align
Kiri, kanan, dan tengah adalah glif yang digunakan untuk membuat rata-kiri, rata-atas,
dan rata-bawah, masing-masing, untuk teks vertikal.

Untuk mendemonstrasikan cara mengubah format teks menggunakan CSS. membuat file CSS dan
HTML. Di sini, saya telah membuat file style.css dan index.html.

a) Cara mengubah warna text dengan CSS

Perhatikan contoh berikut untuk mengubah peringatan teks menggunakan CSS.
index.html

style.css

Seperti yang bisa dilihat pada contoh di bawah ini, terdapat tag paragraf dengan class tulisan
warna. Lalu, matikan peringatan merah dengan CSS. Kemudian terdapat tag p didalam tag div serta
terdapat juga tag p di luar tag div. jika ingin mengatur ssebuah tag yang terdapat pada dalam tag lain
(tag p di dalam tag div) selector yang kita gunakan adalah tag yang awal di ikuti (spasi) dengan tag yang
di dalam.

71
Hasilnya dapat dilihat dalam gambar 6.2 dibawah ini

Gambar 6.2 Hasil Mengubah Warna Teks dengan CSS

b) Cara menggunakan text align CSS

index.html

style.css

Hasil dapat dilihat pada gambar 6.3 di bawah ini

72
 Gambar 6.3 Hasil dari menggunakan text align CSS

c) Contoh mengatur format text lainnya

index.html

style,css

Hasilnya dapat dilihat pada gambar di bawah ini

73
 Gambar 6.4 hasil dari mengubah format teks dengan CSS

6.3 MODIFIKASI LIST DENGAN CSS

CSS has the capability to manage or modify HTML source code. CSS cukup membantu jika ingin
membuat list dengan model yang diinginkan, seperti yang terdiri dari elemen angular, titikal, romawi,
dan lainnya. Dengan menggunakan CSS, Anda dapat memodifikasi format header daftar untuk
mengelola daftar HTML. Atribut "list-style-type", yang menunjukkan gaya daftar, dapat digunakan
untuk mengatur gaya daftar HTML dengan CSS.
Pertimbangkan contoh berikut untuk memodifikasi daftar HTML dengan CSS.
Index.html

74
Style.css

Hasilnya

Gambar 6.5 modifikasi list dengan CSS

CSS Belajar List Building Menggunakan CSS. Dapat dilihat dari contoh di bawah ini bahwa menggunakan
properti dan nilai CSS akan menghasilkan daftar dengan format persegi:

list-style-type: square; /* list dengan bentuk square */

75
 Anda dapat menggunakan fungsi properti dan nilai CSS untuk membuat daftar dengan bentuk
lingkaran kecil.
list-style-type: circle; /* list dengan bentuk lingkaran */

Gunakan properti dan nilai CSS untuk membuat daftar dengan format abjad.
list-style-type: upper-alpha; /* list dengan bentuk alphabet */

Gunakan CSS properti dan nilai untuk membuat daftar dengan format angka romawi:
list-style-type: upper-roman; /* list dengan bentuk romawi */

sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan propery dan value sebagai
berikut:
list-style-type: none; /* menghilangkan tanda list */

6.4 MEMODIFIKASI BORDER DENGAN CSS

Dalam buku ini terdapat pembahasan mengenai manupulasi perbatasan dengan menggunakan
perintah CSS. CSS memberi Anda opsi untuk menyesuaikan warna, ukuran dan gaya perbatasan secara
manual. Misalnya border yang terbuat dari titik-titik, strip, dan pakaian bias model.

a) MENGUBAH BORDER STYLE

Ada beberapa gaya atau model yang tersedia di CSS untuk membuat grafik. Ada banyak gaya dan
gaya lain yang dapat diterapkan pada halaman menggunakan CSS, termasuk yang terbuat dari titik-
titik, putus-putus, dan garis ganda. Untuk membuat situs web yang juga menyediakan gaya nilai yang
diinginkan, gunakan properti gaya batas CSS. Berikut contoh nya, silahkan di perhatikan!
index.html

76
style.css

Hasilnya

Gambar 6.6 hasil mengubah border style dengan CSS

77
Sedikit tambahan informasi, jika Anda cermati dalam selector style.css yang menagarah pada h2 dan
h3, pen - style an dapat di laksanakan secara bersamaan. Dengan memanggil tag 1 dan tag 2 yang di
pisahkan dengan tanda koma = h2, h3 { isi style 1; }

b) MENGATUR UKURAN BORDER

Anda dapat menggunakan properti CSS borderwidth untuk mengubah lebar border. Berikut
adalah contoh cara menentukan lebar batas properti untuk membuat bentuk garis.

index.html

style.css

Hasilnya dapat dilihat pada halaman berikutnya

78
 Gambar 6.7 hasil dari mengatur ukuran border

c) MEMBERI WARNA PADA BORDER

Gunakan properti CSS border-color untuk menambahkan peringatan ke border. Ini adalah contoh
pembuatan peringatan pada grafik dengan menggunakan CSS.
index.html

79
style.css

80
Hasilnya

Gambar 6.8 hasil dari membuat warna border dengan CSS

d) CARA CEPAT MEMANIPULASI BORDER DENGAN CSS

Bagaimana mengelola border maupun membuatgaris border dengan Teknik yang cepat melalui
pemanfaatan CSS, properti CSS border secara terus menerus dapat menjadi jawaban dari masalah ini.
demikian pula secara terus menerus gisi nilai ukuran, garis dan jenis peringatan. Pertimbangkan contoh
berikut untuk mempelajari cara melintasi batas dengan cepat menggunakan CSS.
index.html

style.css

Hasilnya pada halaman berikut ini

81
 Gambar 6.9 hasil dari memanipulasi border dengan CSS

Perhatikan contoh sintaks CSS di bawah ini. Dimungkinkan untuk terus mencatat dimensi, jenis
batas, dan peringatan yang diinginkan dalam batas properti untuk membangun batas dengan cepat.
border:2px solid blue;

Contoh di atas memiliki peringatan hitam putih pekat dan diposisikan pada batas lebar 1 piksel. Berikut
ini adalah beberapa properti lain yang digunakan untuk mengubah batas menggunakan CSS:

82
 BAB 7
MENGATUR MARGIN, PADDING, POSITION
FLOAT DAN TABEL DENGAN CSS

TUJUAN :
a. Mahasiswa mampu mengatur margin dengan CSS
b. Mahasiswa mampu mengatur padding dengan CSS
c. Mahasiswa mampu mengatur position dengan CSS
d. Mahasiswa mampu menampilkan web dengan teknik float dengan CSS
e. Mahasiswa mampu mengatur gaya table dengan CSS

Overview :
Margin dan padding adalah dua elemen yang paling sering digunakan saat menggunakan CSS
untuk mendesain situs web. Karena margin dan padding digunakan untuk mengubah sisi elemen yang
bersebelahan dengan elemen lainnya.
Untuk mengubah posisi elemen HTML, pemosisian CSS digunakan. Kadang-kadang, kami ingin
membuat atau mengubah posisi satu elemen dalam kaitannya dengan elemen lainnya. Oleh karena
itu, dengan menggunakan properti position CSS, Anda dapat menentukan posisi elemen HTML saat ini
sesuai dengan preferensi Anda.
Salah satu teknik yang paling sering digunakan dalam desain web adalah floating text.
Pelampung digunakan untuk memindahkan elemen yang berorientasi horizontal.
Anda dapat memberikan gaya CSS untuk kebutuhan tabel karena juga akan diterjemahkan ke
bahasa Inggris oleh BAB untuk membuat hasil yang menarik untuk tabel.

83
7.1 MARGIN DAN PADDING DENGAN CSS
a) Mengenal Margin pada CSS
Margin adalah bagian terluar dari elemen apa pun. Misalnya, jika Anda ingin menurunkan
kecepatan elemen tertentu, Anda dapat melakukannya dengan menggunakan sintaks margin. Ada
beberapa istilah yang berhubungan dengan margin, seperti margin atas, yang ditulis sebagai "margin-
top" di CSS, margin bawah, atau batas di sekitar bagian bawah header, yang ditulis sebagai "margin-
bottom", " margin-left," yang berfungsi sebagai border di sekitar elemen kiri, dan "margin-right," yang
mengacu pada margin untuk bagian bawah header. Namun, jika Anda hanya menggunakan sintaks
"margin" untuk hari ini saja, maka secara otomatis Anda akan mempengaruhi elemen at, bawah, kiri,
dan canan. Ini adalah contoh cara menggunakan margin di CSS.
index.html

style.css

Hasilnya

Gambar 7.1 margin dengan CSS

84
 Perhatikan contoh di bawah ini. Dalam kasus tata letak dua kolom, pengaturan margin kiri
atau margin atas biasanya 70 piksel atau piksel, dan dalam kasus tata letak tiga kolom, margin
atau batas di sekitar setiap baris biasanya 20 piksel.
b) Mengenal Padding pada CSS
Padding adalah komponen dari elemen tertentu. Anda dapat menggunakan pengisi
sintaks untuk mengubah spasi baris pada elemen tertentu yang Anda kenal. mirip dengan
margin dengan sisi-sisinya. seperti di atas, kiri, kanan, dan bawah. Padding di bagian atas,
bawah, kiri, dan kanan elemen adalah contoh dari jenis padding ini. Padding di bagian atas,
juga dikenal sebagai sisi dalam sebelah di bagian atas elemen, ditentukan dalam CSS sebagai
"padding-top", sedangkan padding di bagian bawah, juga dikenal sebagai jarak di bagian
bawah elemen, ditentukan sebagai " padding-bottom," "padding-left," dan "padding-right,"
yang berada di sisi luar. Jika memakai sintaks “padding” maka secara otomatis akan mengatur
perataan elemen di header, body, dan footer. Ini merupakan contoh dari cara penggunaan
padding di dalam CSS.
index.html

style.css

Hasilnya dapat dilihat pada halaman berikut ini

85
 Gambar 7.2 padding dengan CSS

Dapat dilihat dari contoh diatas perbedaan ketika menggunakan padding dan padding-
left. Sekarang Anda coba dengan menggunakan padding-right, padding-top, padding-bottom
dan serta di coba tanpa menggunakan height dan width.

7.2 MENGATUR POSITION DENGAN CSS

Posisi dalam CSS digunakan untuk mengubah posisi elemen HTML. terkadang kami ingin
membuat atau menggeser posisi satu elemen relatif terhadap elemen lainnya. Jadi, dengan
menggunakan properti position CSS, Anda dapat menentukan posisi elemen HTML tertentu sesuai
dengan preferensi Anda.
Ada beberapa properti CSS yang dapat digunakan untuk menunjukkan posisi elemen HTML
tertentu:
➢ Static
➢ relative
➢ Fixed
➢ Absolute
Ini adalah praktik standar untuk menggunakan properti CSS lainnya, seperti atas, kiri, bawah,
dan kanan, untuk membuat posisi atau mengubah posisi elemen individual. namun, properti yang
disebutkan di atas tidak akan berfungsi jika lokasinya tidak segera diubah. karena posisi properti lain
bergantung pada status mereka saat ini.

a) STATIC
Untuk menjadikan elemen sebagai elemen statis secara default, gunakan posisi statis. Elemen akan
secara otomatis kembali ke posisi semula. Contoh penggunaan posisi statis
index.html

86
Style.css

Note : dalam penulisan perintah dapat di sambung ke kanan, namun setiap perintah ahrus di tutup
dengan tanda ;
Hasilnya

Gambar 7.3 Positon static dengan CSS

b) RELATIVE
Setiap elemen HTML yang menggunakan position relative akan tetap pada posisi defaultnya.
index.html

Style.css

Hasilnya

Gambar 7.4 Positon relative dengan CSS

87
c) FIXED
Setiap elemen HTML dengan pengaturan posisi tetap akan memiliki pesan berulang. tanpa
perubahan apa pun, meskipun tajuk situs web bergulir. terdiri dari penyesuaian kiri, kanan, atas, dan
bawah tetap.

index.html

style.css

Gambar 7.5 Hasil Positon fixed dengan CSS pada posisi atas

88
Gambar 7.6 Hasil Positon fixed dengan CSS pada posisi setelah di scrall ke bawah

d) ABSOLUTE
Elemen HTML yang menggunakan pemosisian absolut akan tumpang tindih dengan elemen
HTML lainnya. Posisi adalah satu-satunya properti posisi CSS yang paling berguna. Metode terbaik
adalah membuat menu drop-down menggunakan HTML dan CSS.

Index.html

Style.css

Hasilnya seperti berikut

89
 Gambar 7.7 Positon absolute dengan CSS

7.3 TEKNIK FLOAT DENGAN CSS

Kebutuhan akan teknik floating dalam desain web adalah salah satu Teknik yang sering di gunakan
dalam CSS. Pelampung digunakan untuk memutar elemen berorientasi horizontal. Ada empat
kemungkinan nilai yang dapat digunakan untuk pelampung properti: left, right, inherit dan none.
Contoh yang paling sering menggunakan pelampung adalah saat mencoba membuat spanduk
untuk situs web yang memiliki konten yang dikunci di sidebar. Berikut adalah contoh cara
menggunakan properti float CSS.
index.html

Letakan file html, css dan gambar di dalam 1 folder

90
 Gambar 7.8 letak html css dan gambar

style.css

Hasilnya

Gambar 7.9 Teknik float dengan CSS

Perhatikan contoh di bawah ini. Untuk membuat gambar diturunkan ke kiri dan teks
membungkus gambar, kita menerapkan float:left ke elemen gambar. Untuk informasi lebih lanjut,
Anda dapat menggunakan properti CSS float:right dan inherit untuk melihat bagaimana berbagai nilai
properti float berbeda satu sama lain.

7.4 DESAIN TABEL DENGAN CSS

Pada saat pelajaran sebelumnya tentang pembuatan tabel HTML, banyak dari kita percaya
bahwa tampilan dari tabel HTML standar sangat berbeda warna. karena tata letak tabel HTML standar
memiliki tata letak yang bias saja. Oleh karena itu, penjelasan tentang cara membuat tabel HTML
menggunakan CSS akan diberikan dalam pelajaran belajar CSS.

91
 Dalam pelajaran ini, saya akan membahas petunjuk langkah demi langkah untuk mendesain
tabel. Hal pertama yang kami buat adalah kerangka tabel.

index.html

92
Dan jika menggunakan browser maka hasilnya akan seperti pada kalimat ini.

Gambar 7.10 design tabel tanpa CSS

Seperti yan di tunjukan diatas. Nampak hasilnya masih standar. Hal ini dapt di buat agar lebih
menarik tentang desain tabel. buat file CSS dan sambungkan secara permanen ke file HTML yang
sesuai. tutorial sebelumnya tentang mempelajari HTML sambil mengintegrasikan CSS dan HTML dapat
ditemukan di sini. Bisa di lihat pada line ke 5 pada file index.html
Kemudian setelah itu silahkan berikan nama class table1 pada tag table pada line 11 dibawah
ini. Untuk tag h3 pada line 9 itu optional saja, bisa di tambahkan dan juga bisa di hiraukan. Untuk line
di bawah nya tidak ada perubahan sama sekali. Hasilnya akan seperti gambar di bawah ini.

Kemudian buat style.css nya di bawah ini

Cermati juga selector nya. .table1, th, td artinya semua selector yang di tunjuk semuanya akan
di rubah seperti pada line 8. Berbeda dengan cara pemanggilan tag di dalam tag atau tag di dalam class
93
dimana tidak menggunakan symbol tanda koma. Dan jika index.html di buka pada aplikasi web browser
maka akan seperti ini

Gambar 7.11 proses design tabel dengan CSS

Harap perhatikan gambar di atas. Meja di sini sekarang jauh lebih ramai. Di tabel elemen, kami
menyediakan font yang dapat digunakan oleh penulis. karena kita akan mengubah font supaya terlihat
lebih cerah dan hidup. Pada tutorial sebelumnya, saya telah menjelaskan cara mengubah jenis huruf.
Silakan baca panduan CSS tentang cara mengubah font. Kemudian ganti nomor kode font dengan kode
#232323. Dan konsep yang paling penting adalah border-collapse:collapse. Ini memiliki fungsi
membuat grafik grafik tabel lebih mudah dibaca.
Kemudian, untuk elemen table head dan table body, kami menggunakan kode warna #999
untuk peringatan tabel. Selain itu, tambahkan padding di bagian bawah dengan lebar sekitar 8 px dan
tinggi 20 px.
Sekarang coba modifikasi style.css menjadi seperti di bawah ini, bisa juga di tambahkan dengan
sesuka anda.

94
Dan hasilnya seperti di bawah ini

Gambar 7.12 hasil akhir design tabel dengan CSS

Silahkan amati selector nya, kemudian anda coba ganti value nya dan coba amati
perubahannya. Pada bagian hasil ketika di tampilkan ke baris no 2 dan 4 ketika di tunjuk kursor akan
berubah warna, namun pada baris 1,3 dan 5 warna baground tidak akan berubah karena bisa di lihat
pada style.css selector pada line 20 – 22
nth-child digunakan untuk memilih elemen sesuai dengan aturan perilaku anak (anak). Ada tag
pembuka dan penutup untuk setiap elemen. Contoh tag pembuka adalah "<div>", dan contoh tag
penutup adalah "</div>", yang dilambangkan dengan garis miring “/". Akibatnya, setiap elemen yang
ada berada di dalam batas elemen lain (dalam tag pembuka dan penutup) bisa disebut anak atau bayi

95
dari unsur yang ada di sekitarnya. Namun tidak semua unsur memiliki tag penutup. anak ke-n ditulis
dengan kode seperti::anak ke-n(X): X = bisa ditulis dengan angka, kata kunci, atau rumus.

96
 BAB 8
ANIMASI GAMBAR & MEMBUAT TEMPLATE WEB

TUJUAN :
a. Mahasiswa Mampu Memberikan Animasi atau Efek pada Gambar
b. Mahasiswa Mampu Membuat Template Web
c. Mahasiswa Mampu Membuat Tampilan Web Responsive

Overview :
Tampilan sangat mempengaruhi dari kenyamanan para pengunjung web, semakin bagus
tampilan dan efek yang di berikan, memberikan kesan berbeda dalam menyajikan sebuah web. Hal
tersebut dapat membuat para pengunjung merasa di sajikan hal yang berbeda dalam membuka web
tersebut. Efek gambar yang di pelajari disini seperti membuat efek blur, transisi dan zoom in maupun
zoom out.
Sebagai seorang web programing, wajib untuk dapat membuat suatu tampilan atau template
dari sebuah website. Pada BAB ini juga akan di bahas cara membuat template web yang cukup menarik
dari HTML di hias dengan CSS dan sedikit mengambil dari javascript.

97
8.1 MEMBERIKAN EFEK PADA GAMBAR DENGAN CSS
Beberapa arahan CSS tersedia untuk mendapatkan efek zoom yang baik pada gambar saat
diarahkan, meskipun digabungkan dengan berbagai rotasi, penskalaan, pengaburan, dan elemen
lainnya. Ada beberapa animasi di banyak situs Web saat ini. Misalnya, animasi sederhana yang
memperbesar gambar saat melayang di dalam bingkai
CSS sangat membantu untuk menyempurnakan tampilan konten website, seperti dengan
menambahkan warna, box shadow, padding, margin, align, dan elemen lainnya. Modul ini akan
menjelaskan cara membuat animasi gambar melayang tanpa menggunakan JavaScript. Tanpa
menggunakan JavaScript dan hanya sedikit menggunakan CSS. Silahkan baca informasi di bawah ini
secara perlahan.
File HTML
index.html

Dokumen HTML diatas hanya menampilkan gambar dengan tag img. Pada line 5 disana di
gunakan untuk memanggil dokumen css yang akn kita gunakan untuk memberikan efek
transisi zoom, transisi dan sejenisnya. Dan jika dokumen CSS belum diisikan maka tampilan
index.html akan seperti di bawah ini

Gambar 8.1 menginputkan gambar dengan HTML

Silahkan Anda coba satu per satu mengisikan dokumen css seperti di bawah ini

98
a) Basic Zoom (basic.css)

Gambar 8.2 Zoom image dengan CSS

Basic.css

b) Quick zoom-in (quick.css)

Gambar 8.3 Quick zoom-n image dengan CSS

99
 quick.css

c) Point-zoom (point.css)

Gambar 8.4 point-zoom image dengan CSS

Point.css

100
d) Zoom dan Rotasi (rotasi.css)

Gambar 8.5 Zoom dan Rotasi image dengan CSS

rotasi.css

e) Slow Motion (slow.css)

Gambar 8.6 slow motion image dengan CSS

101
 Slow.css

f) Brighten and Zoom-in (brighten.css)

Gambar 8.7 brighten and zoom-in image dengan CSS

Brighten.css

102
g) Blur-out with Zooming-in (blur.css)

Gambar 8.8 Blur-out with Zooming-in image dengan CSS

Blur.css

h) Colorize with zooming-in (color.css)

Gambar 8.9 Colorize with zooming-in image dengan CSS

103
 Color.css

8.2 MEMBUAT TEMPLATE WEB

Pada turorial sub poin ini akan di bahas cara pembuatan template dengan menggunakan
HTML, CCS dan di tambah java script sedikit untuk icon – icon nya. Hasil akhir akhir yang nantinya
terselesaikan adalah seperti ini

Gambar 8.10 Contoh template web

Silahkan ikuti tahapan di bawah ini

104
Index.html

Satu-satunya atribut global HTML yang dapat diterapkan ke elemen HTML apa pun adalah
atribut lang, dan atribut ini sangat membantu karena aksesibilitasnya (aksesibilitas). Elemen HTML
yang memungkinkan deklarasi diterapkan ke semua konten halaman tertentu adalah yang paling
sering digunakan. Misalnya, deklarasi html lang="en"> memberi tahu browser bahwa semua konten di
bagian yang diterjemahkan adalah dalam bahasa Inggris.
Nilai Atribut ltr adalah kata kunci kiri-ke-kanan yang akan membuat teks membentang dari
atas ke bawah web browser. RTL, di sisi lain, adalah singkatan dari kanan ke kiri yang akan mencetak
teks dari atas ke bawah.
Data tentang data adalah meta tag, dan itu tidak ditujukan untuk pengguna melainkan untuk
browser web atau "program robot" seperti mesin pencari (search engine). ? Menurut definisi resmi,
charset adalah kumpulan instruksi yang digunakan untuk mengubah bit-bit dalam HTML menjadi
karakter. Oleh karena itu, charset UTF-8 dalam dokumen ini memberikan instruksi kepada browser
web tentang cara merender karakter dalam dokumen HTML sebagai UTF-8. Saat ini, satu-satunya set
karakter yang digunakan adalah ASCII (charset="us-ascii"), meskipun set karakter ini dibatasi paling
banyak 128 karakter. Kemudian ubah ASCII menjadi karakter ANSI atau cetak dengan charset ISO-8859-
1. Karakter ANSI dapat mencakup hingga 256 karakter dan sering digunakan dalam HTML versi 2.0
hingga 4.01. Permasalahan yang diberikan pada karakter ASCII atau ANSI tidak menyertakan karakter
non-latin, seperti huruf Arab, China, Jepang, dll, sehingga untuk keperluan ini dikembangkanlah set

105
untuk masing-masing bahasa, seperti big5 untuk Akibatnya, hal ini menimbulkan perbedaan pada set
karakter tergantung bahasa yang akan digunakan untuk menulis kode HTML. Ini adalah sesuatu yang
dapat diprogram menggunakan sintaks HTML, tetapi akan lebih praktis jika semua karakter disertakan
dalam satu set. Sejak awal pengembangan XHTML, istilah "Unicode Transformation Format-8" (UTF-8)
telah digunakan untuk merujuk pada kumpulan karakter yang mewakili sekitar 10.000 karakter lebih
banyak daripada yang sekarang digunakan di dunia dan telah menjadi karakter standar. ditetapkan
untuk seluruh dunia.
"Font Awesome" adalah kumpulan ikon yang dibuat dengan harga yang sama dan
memanfaatkan sistem "Font Icon", yang memungkinkan pengguna mengubah warna dan ukuran font
tanpa harus mempelajari CSS, dan membuat ikon lebih kecil dan lebih bulat daripada Ikon Gambar.

Style.css

106
Istilah "pemilih universal" mengacu pada pemilih yang digunakan untuk memilih setiap elemen di
dalam lingkup saat ini.

107
Oleh karena itu, setiap elemen akan memiliki batas padat, lebar 1px, berwarna abu-abu di
sekelilingnya.
Pemilih universal dapat digunakan untuk mengatur ulang CSS. Mengapa kita perlu mengatur ulang?
Ada beberapa elemen ramah browser CSS dalam kode sumber HTML, seperti padding dan margin pada
elemen saat ini. Tujuan reset adalah untuk menghapus padding dan margin saat ini. Reset Contoh CSS:

Karenanya, tidak ada elemen yang memiliki padding atau margin.

108
 BAB 9
MENGISI KOTEN & MEMBUAT HALAMAN RESPONSIVE

TUJUAN :
a. Mahasiswa Dapat Mengisi Konten dari Template yang Sudah di Buat sebelumnya
b. Mahasiswa Mampu Membuat Tautan Link berdasarkan Name Section
c. Mahasiswa Mampu Membuat Halaman Web Menjadi Responsive

Overview :
Setelah anda membuat template web pada BAB sebelumnya, pada BAB kali ini berfokus dalam
pengisian konten web beserta membuat link berdasarkan name ID. Untuk hyperlink name ID sudah
pernah diajarkan juga pada buku ini, silahkan anda pelajari lagi pada BAB ke 3 sub poin hyperlink.
Saat ini, sebagian besar pengguna internet mengakses situs web melalui perangkat seluler.
Akibatnya, setiap aplikasi situs web harus menjunjung tinggi prinsip akuntabilitas (tata letak responsif).
Istilah "tata letak responsif" mengacu pada teknik untuk membuat halaman web yang menggunakan
teks fleksibel, gambar fleksibel, dan file media fleksibel dalam lembar gaya. Aplikasi web yang
menggunakan tata letak responsif mendapat manfaat dari fakta bahwa informasi yang ditampilkan di
situs web dapat dibaca dan dipahami oleh pengunjung tanpa kesulitan dan dapat diakses tanpa
penundaan dari perangkat seluler apa pun.

109
9.1 MENGISI KONTEN
Setelah template HTML dan CSS tahapan sebelumnya telah selesai, silahkan Anda isikan
konten pada masing – masing menubar pada bagian section. Kemudian silahkan Anda atur sendiri
mengenai tampilan misalkan font-size, padding, margin, dan lain – lain sedemikian rupa sehingga
tampilan halaman sangat bagus dan nyaman untuk di lihat.
Dalam pembuatan web tidak hanya isi konten saja yang di perhatikan, pewarnaan, tata letak,
gaya atau style atau bentuk huruf juga juga harus di perhatikan. Karena style yang bagus akan
membuat user atau pengujung menjadi nyaman untuk membuka web tersebut lebih lama. Bahkan
style yang bagus juga membuat user tertarik untuk melihat isi kontennya.
Dalam pengisian konten silahkan Anda masukkan kedalam section dan berikan ID pada setiap
section tersebut untuk di gunakan proses pemanggilan pada side-bar nya. Berikut ini contoh dalam
membuat section Beranda yang hasilnya seperti di bawah ini.

Gambar 9.1 Halaman Beranda

Selanjutnya atur file index.html seperti di bawah ini

Section untuk
Tampilan Beranda

110
Dalam penganggilan <a haref=”#..”> menggunkan ID dari section. Anda juga bisa menghubungkan file
HTML lain dengan tag dan atribut <a href >. Atur gaya tampilan section id beranda tersebut se suka
hati Anda menggunakan css, contoh :

Anda bisa menggunakan

selector Tag / ID maupun
Class

111
 Setelah membuat tahapan di atas, silahkan anda buat juga section untuk halaman lain. Saya
contohkan disini membuat section untuk about yang nanti bisa di panggil lewat sidebar About dan juga
Tompol seklengkapnya pada halaman Beranda. Silahkan buat section lagi (untuk halaman about) di
bawah section halaman beranda.
index.html

112
 Kemudian setelah ini silahkan atur gaya css sesuai dengan kehendak anda pada bagian style.css
nya, contoh gaya css seperti dibawah ini

Style.css

Style untuk about

Dan tabel

Hasilnya dapat dilihat pada halaman berikutnya

113
 Gambar 9.2 Halaman About

Silahkan Anda lanjutkan sendiri untuk pembuatan section untuk menampilkan halaman yang
lainnya beserta atur gaya CSS nya sesuai kehendak Anda.

9.2 MEMBUAT HALAMAN MENJADI RESPONSIVE

Desain responsif web membuat beranda situs web Anda tampak bagus dari segala sudut. Desain
responsif web hanya menggunakan HTML dan CSS. Situs web dapat dilihat di berbagai perangkat,
termasuk desktop, tablet, dan ponsel. Apa pun perangkatnya, situs web Anda akan terlihat bagus dan
mudah digunakan.
Situs web tidak dapat memperbarui informasi secara otomatis agar sesuai dengan perangkat yang
lebih kecil; sebagai gantinya, konten harus disesuaikan agar cocok dengan perangkat mana pun yang
digunakan.

Desktop Tablet Telepon

Gambar 9.3 tampilan Halaman web di berbagai perangkat

114
 Ini disebut sebagai desain web responsif saat menggunakan CSS dan HTML untuk menyesuaikan
ukuran, bentuk, warna, font, atau atribut konten lainnya sehingga tampak sesuai di mana pun
ditempatkan.

1. Ubahlah sidebar menjadi terihat saat halaman pertama kali di buka dengan cara mengubah
value left : -250px; menjadi left : 0px; ini akan membuat sidebar akan selalu terlihat.

2. Atur posisi saat web di buka dengan menggunakan layar lebar seperti monitor PC atau laptop
yang lebih dari 1300px.

@media di gunakan untuk merubah tampilan browser agar tampilan website bisa menjadi
responsive. @media dapat berisi min-width dan max-width.
3. Atur tampilan saat web di buka dengan menggunakan handphoe atau layar di bawah 500px;

115
Untuk syntac diatas ini sebenarnya sama dengan syntac yang ada pada atasnya saat kita belajar
mengisi konten. Bedanya hanya terletak pada value nya saja karena kita akan mengatur
tampilan menjadi lebih kecil.

Ketika di buka dengan layar lebar :

Gambar 9.4 responsive dengan layar komputer

116
Ketika di buka dengan layar kecil :
- Sidebar akan terhidden dan di tampilkan tombol menu secara otomatis

Gambar 9.5 responsive dengan layar smartphone sidebar tersembunyi

- Saat menu di klik , sidebar akan tampil dengan ukuran yang lebih kecil

Gambar 9.6 responsive dengan layar smartphone sidebar terbuka

- Saat layar di buat sedikit besar. Bandingkan ukuran menubar gambar di atas dengan
gambar di bawah ini

Gambar 9.7 responsive dengan layar tablet

117
 BAB 10
JAVA SCRIPT DAN ATURAN DASAR

TUJUAN :
a. Mahasiswa Memahami Pengertian JavaScript
b. Mahasiswa Memahami Sejarah JavaSript
c. Mahasiswa Memahami Istilah yang Ada Pada Javascript
d. Mahasiswa Mampu Membuat Dokument JavaScript
e. Mahasiswa Mampu Membuat Tampilan Output Pada JavaScript

Overview :
JavaScript adalah bahasa pemrograman yang paling banyak digunakan oleh programmer situs
web atau pengembang situs web. Ada kemungkinan bahwa meskipun Anda sudah familiar dengan
gaya ini, Anda tidak menyadari maknanya. Berbeda dengan orang yang cuek, Anda yang sudah
memrogramkan dunia pemrograman dan kode kemungkinan besar akan memahaminya dengan
mudah.
Jika Anda adalah satu-satunya orang di dunia yang tertarik mempelajari JavaScript, Anda
dapat membaca lebih lanjut tentangnya di bagian bawah halaman ini. Kali ini, kita akan membahas
setiap aspek JavaScript menggunakan bahasa yang bahkan orang awam pun dapat dengan mudah
memahaminya, meminimalkan penggunaan istilah penuh jargon. Sekarang saya telah mengatakan
itu, silakan baca penjelasan yang lebih panjang di bawah ini.

118
10.1 INTRODUCTION
a) PENGERTIAN DARI JAVASCRIPT
Apa sebenarnya javascript seperti yang telah disebutkan di paragraf sebelumnya? Javascript
adalah salah satu dari sedikit bahasa pemrograman internet yang dapat membuat situs web Anda lebih
menarik dan layak huni. Kesalahan eksekusi Javascript terjadi di jendela browser pengguna atau
tempat lain selain server, yang berbeda dari PHP.
Tampilan Javascript berbeda dari HTML dan CSS. CSS dan HTML masing-masing digunakan
untuk mengubah format konten tabular. oleh karena itu desain keseluruhannya sangat berbeda. Ada
beberapa contoh orang yang menggunakan HTML, CSS, dan javascript secara bersamaan, termasuk
konstruksi rumah, dekorasi interior, dan lampu serta pintu-pintu.
Akibatnya, HTML digambarkan sebagai sebuah blok bangunan yang dapat digunakan untuk
merenungkan segala sesuatu, bahkan tempat-tempat dengan alamat tetap seperti tembok, pintu,
atap, dan lain-lain. Sebaliknya, CSS adalah alat dekorasi rumah yang dapat mengubah tampilan
wallpaper, karpet, dan hal-hal lain di rumah Anda. Javascript berguna untuk hal-hal yang perlu
responsif dan menghidupkan, seperti menyalakan lampu atau membuat pintu.
Javascript membuat situs web lebih responsif karena, meski tidak ada masalah, isinya masih
akan berubah secara signifikan. Anda dapat menemukan nomor rumah Anda. Tidak adanya lampu atau
pintu mungkin tidak menjadi masalah, tetapi rumah besar mungkin menjadi redup dan mulai
mengeluarkan sedikit kelembapan. Juga, kehadiran javascript membuat situs web agak tidak menarik.
Bahasa ini termasuk yang paling mudah dipelajari para segelintir. Beberapa website populer
yang sekarang tersedia menggunakan bahasa Netscape. Menggunakan Javascript memungkinkan
Anda mengirim elemen ke halaman web yang diinginkan.
Selain kompatibel dengan berbagai platform dan browser web, JavaScript cukup serbaguna.
Penggunaan memorinya sangat kecil, ringan, dan cepat dibandingkan dengan bahasa pengkodean
lainnya. Namun, javascript tidak seaman bahasa pemrograman lainnya.Anda dapat melanjutkan
membaca paragraf berikutnya untuk kejelasan dan detail lebih lanjut.

b) SEJARAH
Seperti yang telah disebutkan sebelumnya, Javascript adalah bahasa pemrograman yang
dikembangkan oleh Netscape. Proses desain membutuhkan waktu sepanjang hari. Nama Javascript
adalah Mocha, yang dibuat oleh Mona, Live Script, dan kemudian Javascript.
Hanya komunitas Netscape yang menggunakan Javascript versi asli, September 1995, dan
fungsinya telah diperbarui. Namun seiring berjalannya waktu, Javascript terus berkembang hingga bisa
berfungsi seperti sekarang.
Pada tahun 1996, JavaScript sebagian besar disebut sebagai ECMAScript. Situasi ini dimulai
pada tahun 1998. ECMAScript 2 dan ECMAScript 3 dibuat masing-masing pada tahun 1998 dan 1999.
ECMAScript terus berkembang hingga akhirnya berevolusi menjadi JavaScript yang digunakan saat ini.
Hampir 92 persen situs web pada tahun 2016 menggunakan Javascript. Mungkin jumlahnya akan lebih
tinggi dari saat ini. Bolehkah saya mau?
Rupanya, selama dua tahun ke depan, javascript berkembang sebagai satu-satunya bahasa
pemrograman yang paling populer dan penting. Jika Anda sering menggunakan internet, Anda
mungkin tahu apa itu javascript, familiar dengan namanya, atau lebih kabur dan belum pernah melihat
sintaksnya.

119
c) CARA KERJA DAN FUNGSI JAVASCRIPT
Untuk lebih memahami siapa kami sebagai sebuah tim, kami akan meninjau fungsi dan metode
kerja Javascript. HTML, CSS, PHP, dan bahasa pengkodean lainnya akan sering diperiksa oleh server
sebelum dikirim ke pengguna. Lebih tepatnya, ketika Anda membuat situs web menggunakan HTML,
CSS, PHP, dan bahasa lainnya, bahasa situs web tersebut akan diterjemahkan secara otomatis dan
diperiksa oleh server web setiap kali pengunjung meminta akses ke sana.
Server web akan segera mulai menghapus cookie yang ada, setelah itu mereka akan ditinjau
dengan cermat oleh pengunjung situs web sebelum dikirim ke mereka, memungkinkan mereka untuk
mendapatkan data dan informasi lainnya dari situs yang baru dikunjungi. Metode kerja ini berbeda
dengan metode kerja yang digunakan oleh Javasript.
Cara kerja dari javascript adalah bahwa pengguna situs web akan dikirim ke file dengan
ekstensi evil.js atau ke halaman yang telah disematkan secara permanen. Oleh karena itu,
dimungkinkan untuk menyebutnya sebagai bahasa klien. Lain kali klien mengunjungi situs web, skrip
yang disebutkan di atas akan aktif di titik akhir klien. Aksara yang sama juga digunakan pada dimakat
yang sedang digunakan. Oleh karena itu, masalahnya bukan terletak pada server web melainkan pada
masing-masing klien atau pengunjung situs web.
Namun, tersedia browser yang menawarkan opsi bagi pengguna untuk menentukan apakah
mereka ingin mengaktifkan atau tidak. Beberapa fitur tidak akan berfungsi atau, lebih buruk lagi, tidak
akan tersedia jika hal ini tidak terjadi. Dan Anda sebagai awam mungkin bisa memahami hal ini. Jika
Anda sering menggunakan internet, mungkin ada situs web yang meminta Anda untuk mengaktifkan
fungsi javascriptnya. Itulah satu-satunya hal yang disorot dalam paragraf ini. Namun, ada browser web
yang menawarkan opsi aktif yang tidak ada.

d) KELEBIHAN JAVASCRIPT
JavaScript adalah satu-satunya bahasa pemrograman dengan banyak kekurangan. Jika
dibandingkan dengan bahasa pemrograman bahasa lain, keterampilan lain lebih mudah dipelajari.
Penanganan dan koreksi kesalahan juga lebih mudah. Selain itu, Anda tidak memerlukan kompiler
karena browser web dapat mengartikannya menggunakan HTML.
Javascript juga dapat diaktifkan pada halaman web atau peristiwa yang ditargetkan, seperti
selama klik atau gerakan mouse. File Javascript juga dapat digunakan di berbagai platform dan browser
web, menjadikannya cukup populer dan penggunaannya hampir universal. Selain itu, Javascript dapat
digunakan untuk memvalidasi informasi saat ini, membuatnya kurang diinginkan untuk memasukkan
data secara manual.
Dibandingkan dengan bahasa pemrograman lain, Javascript lebih ringkas, lebih cepat, dan
lebih efisien saat membandingkan penggunaan memori. Alasan yang disebutkan di atas hanya
menjadikan Javascript sebagai bahasa pemrograman yang kurang disukai. Setiap tindakan memiliki
beberapa risiko, bahkan menggunakan javascript.

e) KEKURANGAN JAVASCRIPT
Jenis ketidakpastian lainnya adalah adanya risiko ledakan yang tinggi. Seperti yang sudah kita
ketahui, Javascript sangat populer. Kemungkinan hal ini akan mendorong peretas, penipu, atau aktor
jahat lainnya untuk menyerang dan mencari potensi kelemahan dalam sistem.

120
 Situasi saat ini baru-baru ini menarik perhatian organisasi Javascript, tetapi juga membawa
risiko yang signifikan, sehingga yang menggunakannya harus waspada. Selain itu, Javascript dapat
digunakan untuk mengaktifkan kode komputer khusus pengguna. Setiap kali mereka
menggunakannya, pengguna harus berhati-hati.
Masalah lain yang tidak terkait dengan popularitas masalah ini adalah keamanan browser.
Meskipun sebagian besar browser web mendukung javascript, masih ada beberapa yang tidak dan
tidak dapat digunakan dalam konteks saat ini. Ini biasanya melibatkan seseorang mematikan browser
web mereka. Jika dinyatakan, apakah ada tanda-tanda masalah? Karena baik pemilik situs web
maupun pengunjung tidak dapat memaksimalkan konten mereka, inilah satu-satunya alasan.

f) PERBEDAAN JAVASCRIPT DENGAN BAHASA PEMROGRAMAN LAINNYA

Bahasa yang akan dibahas bersama adalah PHP, HTML, CSS, dan Javascript. Elemen pertama
adalah Javascript, atau JS mungkin disertakan. Fungsi dasar JavaScript adalah membuat situs web apa
pun lebih menarik dan menarik.
JS adalah bahasa pemrograman yang diaktifkan oleh browser pengguna, berbeda dengan
bahasa pemrograman lain yang diaktifkan oleh server. Pengembang umumnya tidak perlu melanjutkan
prosedur asli untuk menyediakan fungsionalitas yang diperlukan karena JS biasanya beralih ke posisi
bawahan organisasi lain.
Anda mungkin sudah mengetahui bahwa HTML, juga dikenal sebagai Hyper Text Markup
Language, sering digunakan di situs web dan berfungsi sebagai titik awal untuk berbagai bagian situs
web. Setiap orang yang memiliki situs web mungkin merasa canggung menggunakan tag HTML "img"
untuk gambar, "p" untuk paragraf, dan beberapa simbol lainnya.
Sebaliknya, CSS, juga dikenal sebagai Cascading Style Sheets, sering digunakan untuk
mengubah gaya dan format konten. Dalam HTML, setiap elemen harus dimasukkan secara manual,
namun dalam CSS, hal ini tidak diperlukan untuk menampilkan konten apa pun. Anda tidak diharuskan
untuk memahami berungkali tampilan elemen.
PHP sering disebut sebagai "sisi server" karena sebagian besar pemrosesan datanya terjadi di
server, tidak seperti JavaScript, yang diluncurkan dari komputer klien atau biasanya disebut sebagai
"sisi klien Bahasa pemrograman PHP sering disertakan dalam WordPress dan sistem manajemen
lainnya. PHP sering digunakan dalam pengembangan back end karena menawarkan toples terbaik
untuk memfasilitasi proses transfer informasi.

10.2 CARA MEMBUAT JAVASCRIPT DI WEBSITE

Javascript adalah bahasa pemrograman yang sederhana untuk dipelajari dan
pengembangannya sederhana. Tidak diragukan lagi, menggunakan tag "skrip" diperlukan untuk
menyematkan string skrip Java di halaman. Javascript juga digunakan dengan benar di header situs
web Anda. Tetapi Anda juga dapat memilih untuk tidak menggunakannya di lain waktu atau dengan
elemen lain. Kode dalam JS juga dapat dieksekusi sebagai file terpisah.
Saat ini, Javascript tidak hanya digunakan untuk aplikasi sisi klien (browser). Selain itu,
Javascript digunakan di server, konsol, program desktop, aplikasi seluler, jaringan IoT, game, dan
platform lainnya. Ini membuat Javascript lebih populer dan bahasa yang paling sering digunakan
pengguna Github.

121
a) MENGENAL CONSOLE

Konsole merupakan bagian untuk menampilkan pesan error jika kita melakukan kesalahan dalam
menuliskan syntac javascript. Untuk memampilkan halaman ini Anda dapat membuka browser
kemudian klik kanan – Inspect elemet – Console

Gambar 10.1 Console pada browser

Didalam console ini kita jug adapt menulis fungsi atau code javascript dan hasilnya langsung bisa di
tampilkan pada browser. Coba kita tulis kode seperti di bawah ini pada console :
console.log("Hi apa kabar!");

alert("Saya sedang belajar javascript");

Gambar 10.2 hasil dari perintah console

122
 Setelah penginstalan konsol Javascript, berikut ini yang mungkin Anda harapkan:

➢ Konsol dapat digunakan untuk memodifikasi kode atau fungsi Javascript;

➢ Konsol dapat digunakan untuk melihat kesalahan saat men-debug program.

a) MEMBUAT PROGRAM JAVASCRIPT

Mulai editor teks, lalu buat file dengan nama index.html dengan kode berikut:

maka akan terlihat seperti ini:

Gambar 10.3 hasil dari program javascript

Kenapa console.log("Saya belajar Javascript"); tidak di tampilkan?

Karena faktanya console.log() atau fungsi terkait akan mengirimkan pesan ke konsol Java
script. Sebagai alternatif, karena fungsi document.write() adalah untuk menulis ke dokumen HTML,
informasinya akan ditampilkan pada saat itu.
Mulai sekarang, mulailah mengetik javascript konsol. Jadi, kita akan melihat sebuah pesan.
"Saya belajar Javascript":

123
 Gambar 10.4 perintah console

Selain document.write() dan console.write() ada kode lain untuk menampilkan output pada javascript.
Namun sebelum membahas lebih dalam, kita pelajari dulu mengenai Menulis Java Script di HTML

b) CARA MENULIS KODE JAVASCRIPT DI HTML

Pada contoh di bawah ini, kami telah memasukkan kode JavaScript menggunakan teknologi
embedding HTML (ditempel). Meskipun semua telah dikatakan, masih ada beberapa hal yang
memerlukan perhatian kita :
a. Embed (kode HTML untuk Javascript diuji terus menerus. Konteks: saat ini)
b. Inline (Kode JavaScript tertanam dalam atribut HTML.)
c. Eksternal (File HTML dan kode Javascript kompatibel.)

1) Penulisan Kode Javascript Embed

Dalam hal ini, kode Javascript tertanam dalam HTML dengan menggunakan elemen "<script>."
Tag ini dapat ditulis dalam tag “<head>” dan “<body>”.

124
 Meskipun dapat di tulis pada bagian <head> ataupun <body>, Namun demikian, banyak orang
menyarankan untuk menempatkannya di body> karena akan membuat website memuat lebih
cepat.

2) Penulisan Kode Javascript Inline

Dengan metode ini, kami akan menyematkan kode JavaScript dalam atribut HTML. Metode ini
sering digunakan untuk mengaktifkan fungsi utama acara saat ini.
Saat ditautkan, diklik, misalnya.

Atau bisa juga seperti :

Hasilnya :

Gambar 10.5 inline javascript

Keterangan :
- Pada contoh pertama di atas, kode javascript dituliskan pada event atribut. Satu-satunya
atribut event yang ada dalam HTML adalah onclick. Oleh karena itu, kode JavaScript dapat
ditulis dalam event atribut.
- Pada HTML, atribut event ditulis terlebih dahulu dengan huruf on, seperti Atribut HTML yang
dikenal sebagai onclick digunakan untuk event clicks. Silakan baca contoh di bagian bawah
penjelasan ini.

125
- Pada contoh di bawah ini, aktifkan fungsi alert(). Fungsi ini adalah salah satu untuk
menyajikan dialog. Kemudian, dengan menggunakan Javascript, kami menambahkan fungsi
alert() ke atribut href. Atribut href biasanya digunakan untuk menentukan tautan atau alamat
URL. Karena kami ingin menyematkan kode JavaScript di sini, kami akan mengonversi alamat
tautan menjadi javascript dan kemudian menerapkan fungsionalitas yang dimaksud.

Contoh atribut event HTML onkeyup

Dalam contoh ini, kami menggunakan event keyup yang mendukung onkeyup. Kejadian ini
terjadi saat kami menekan tombol pada keyboard. Sederhananya, ketika kita mengklik elemen
"textarea", kode JavaScript yang ada di sana akan dieksekusi.
Kode Javascript ini digunakan untuk menampilkan berbagai karakter dinamis.
Hasil:

Gambar 10.6 jumlah karakter dengan javascript

Tabel 10.1 Event system dalam javascript

126
Tabel 10.2 Event pengguna beserta keterangan

127
3) Penulisan Kode Javascript Eksternal
Dalam metode ini, kami akan menyertakan kode JavaScript dalam file HTML yang diformat dengan
ketat. Karena lebih mudah mengelola kode proyek dengan metode ini, cara ini biasanya digunakan
untuk proyek-proyek besar.
Buat file html dan file js dalam 1 folder atau menyesuaikan folder

Gambar 10.7 penulisan javascript Eksternal

Isi file kode.js

Isi file eksternal.html

Untuk menyisipkan file javascript, gunakan tag <script> … </script>

Hasilnya :

Gambar 10.8 alert javascript

128
 Selain itu kita juga dapat menyisipkan javascript yanga da di internet dengan memberikan
alamat URL lengkapnya seperti :

c) MENAMPILKAN OUTPUT PADA JAVASCRIPT

Keluaran Istilah "keluaran" mengacu pada perangkat lunak yang biasanya digunakan untuk
memberikan hasil akhir. Output sering disampaikan dalam bentuk teks dengan kemampuan cetak ().
Ada dua cara untuk menampilkan keluaran di Javascript :
4.1 Menggunakan fungsi Console.log()
Fungsi console.log() adalah berfungsi untuk mengirim teks ke konsol Javascript.
Konteks penggunaan:

Hasilnya dapat dilihat pada halaman berikutnya :

Gambar 10.9 console.log

Console.log() biasanya digunakan untuk debugging. Karena setiap pernyataan Javascript selalu
muncul di Console. Ada beberapa fungsi debug yang tersedia selain console.log(), termasuk
console.debug(), console.info(), console.error(), console.dir(), dan lainnya.

Gambar 10.10 atribut console

129
4.2 Menggunakan Fungsi Alert()
Fungsi alert() adalah untuk menampilkan kotak dialog. Fungsi terletak di objek jendela secara
default. Teks komprehensif seperti itu dapat ditulis:

Bisa juga di tulis seperti :

Contoh :

Hasilnya

Gambar 10.11 alert dengan javascript

Pesan alert diatas di masukkan ke dalam function sayHello(). Function akan kita pelajari pada BAB
berikutnya.

4.3 Menggunakan Fungsi document.write()

Istilah "objek dokumen" mengacu pada objek Javascript yang menampilkan konten HTML. Ada
fungsi write() pada objek dokumen yang dapat digunakan untuk mengirimkan konten ke dokumen
HTML.
Contoh:

130
 Hasilnya

Gambar 10.12 document.write JS

Seiring dengan fungsi write(), dokumen objek juga menyediakan banyak alat lain untuk
memanipulasi dokumen HTML.

4.4 Menggunakan innerHTML

innerHTML adalah properti elemen HTML (objek) yang berisi string HTML. Dengan menggunakan
innerHTML, kami dapat mengirim data ke elemen yang lebih spesifik.
Contoh:

Hasilnya
131
 Gambar 10.13 innerHTML JS

4.5 Menampilkan Dengan Dialog

Memanfaatkan fungsi peringatan adalah metode alert(). Fungsi penting dari alert() adalah
salah satu yang akan meningkatkan komunikasi. Dialog adalah jenis jendela yang paling umum
digunakan untuk berkomunikasi dengan pengguna. Ada tiga kotak dialog berbeda dalam
Javascript:
➢ alert();
➢ confirm();
➢ promp();

Ketiga dialog ini memiliki perilaku dan kegunaan yang berbeda-beda.

➢ Jendela dialog alert();
Dialog alert() biasanya digunakan untuk menampilkan teks atau informasi peringatan yang
mendesak. Fungsi Alert() aktif di objek window. Seseorang dapat menggunakannya dengan
cara yang dijelaskan dalam artikel ini:

Atau seperti ini:

Karena jendela memiliki fokus global, kita bebas mengabaikannya. Dialog alert() tidak akan
menampilkan nilai saat ini saat perintah dijalankan.

132
 Dialog alert() hanya membutuhkan satu parameter, yaitu teks yang akan ditampilkan pada
dialog. Kami menyediakan teks dalam contoh di bawah ini. Salam dan selamat datang di
pelajaran Javascript.
Pertanyaan: Bagaimana saya bisa menyertakan kotak dialog alert() ke dalam acara yang
sesuai, katakan saja dengan lantang saat tombol diklik?
Kita dapat melakukannya dengan menambahkan fungsionalitas dialog ke event listener.
Dengan HTML, Anda dapat menambahkan fungsi alert() ke atribut onClick sehingga akan
ditampilkan saat elemen diklik.

Contoh:

➢ Jendela dialog confirm();

Kotak dialog confirm() digunakan untuk mendapatkan konfirmasi sebelum melakukan
tindakan yang relevan.
Misalnya: Saat kita sedang mendiskusikan sesuatu, penting untuk melakukan percakapan
untuk menegaskan (). Jadi tindakan yang dimaksud cukup berwawasan luas. Kotak dialog
konfirmasi memiliki fungsi konfirmasi ().
Contoh:

133
 Jika Anda memilih tombol OK di kotak dialog confirm(), hasilnya akan benar; jika Anda
memilih tombol Batal, hasilnya akan salah. Kita dapat menyematkan kalimat ini ke dalam
variabel yang akan dievaluasi.
Contoh:

Jika di klik cancel akan menampilkan

Jika di klik OK akan menampilkan website https://stekom.ac.id/

➢ Jendela dialog prompt();
Dialog prompt() memiliki fungsi menerima input pengguna. Masukan dari pengguna akan
digunakan untuk menghasilkan string di kotak dialog prompt().
Contoh:

134
Setelah di klik OK

Dialog prompt() memiliki beberapa parameter wajib yang harus ditentukan:

• Teks yang akan dimasukkan ke dalam formulir;
• kolom input default.
Pada contoh di atas, kami memberikan nilai default sebagai string dengan karakter garis
bawah " ".

135
 BAB 11
VARIABEL, TIPE DATA & OPERATOR

TUJUAN :
a. Mahasiswa Mampu Memahami dan Membuat serta Menampilkan Data dengan Variabel
b. Mahasiswa Memahami Tipe Data di JavaSript
c. Mahasiswa Memahami dan Meng Implementasikan Operator di java script

Overview :
Penulisan suatu value yang berkelanjutan dan panjang, dapat di permudah dengan sebuah
variable.jadi pada dasarnya variable ini adalah suatu tempat atau wadah kosong yang di beri nama
dan dapat menampung value bertipe data apa saja. Ada persyaratan dalam membuat sebuah variable
yang akan di bahas pada bab ini.
Javascript adalah bahasa dengan penekanan kuat pada pengetikan dinamis, oleh karena itu
tidak seperti bahasa dengan penekanan kuat pada pengetikan statis seperti C, C++, Java, dan
sebagainya, di mana tipe data harus ditentukan pada saat pembuatan variabel, tidak memerlukan ini.
(harus mendeklarasikan tipe data). Namun demikian kita harus mengetahui type data apa saja yang
ada di javascript.
Operator di gunakan untuk melakukan pemrosesan data dari pemberian nilai variable,
perbandingan, aritmatika dan logika.

136
11.1 VARIABEL
Variabel adalah nama yang berisi nilai numerik. Variabel dapat dibuat dengan berbagai jenis
nilai numerik, termasuk teks (teks), angka (angka), objek, array, dan lain-lain. Kita dapat menyimpulkan
bahwa variabel ini berfungsi sebagai cara untuk menunjukkan sesuatu.

Variabel Variabel berisi buah variable berisi angka

Gambar 11.1 Ilustrasi Variabel

1) Cara Membuat Variabel

Cara khas untuk membuat variabel dalam javascript adalah dengan menggunakan kata kunci var
diikuti dengan nama dan definisi variabel.
Contoh:

Pada contoh di bawah ini, kita membuat sebuah variabel bernama judul dengan teks "Pelajari
Javascript" sebagai nilainya.
Contoh lagi:

Perhatikan!
Dalam contoh di atas, kami menggunakan kapital atau desimal signifikan untuk mewakili nama
variabel yang terdiri dari dua subskrip. Mengapa Anda tidak menggunakan garis bawah? Dalam
Javascript, camelCase digunakan di seluruh kode sebagai namespace. Penggunaan kotak ular atau
jenis garis bawah ini diperbolehkan saat ini :

Ini tidak akan menimbulkan masalah karena perangkat lunak masih berjalan. Meskipun demikian,
sebagian besar pemrogram Javascript menggunakan camelCase.
Perlu diingat, selain menggunakan kata kunci var, Anda juga dapat membuat variabel
menggunakan kata kunci let atau tanpa awalan lainnya..

137
 Apa tujuan penggunaan var, let, dan tanpa awalan?
Kesamaan antara pengguna dan jangkauannya jelas. Di masa mendatang, variabel yang dihapus
akan diterjemahkan.
Selanjutnya, "Apa yang akan terjadi jika nilai variabel tidak disetel?"
Akibatnya, nilai variabel tidak ditentukan (belum ditentukan).
Contoh:

Maka variable x akan bernilai undefined.

2) Aturan Membuat Variabel

➢ Penamaan variabel tidak boleh menggunakan angka di depannya.

➢ Penamaan variabel boleh menggunakan awal underscore.

➢ Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku kata.

3) Menampilkan Isi Variabel

Untuk menampilkan variabel isi, Anda dapat menggunakan banyak fungsi untuk menghasilkan
keluaran seperti:
➢ Fungsi console.log() digunakan untuk mencetak javascript dalam console ;
➢ Fungsi document.write() digunakan untuk mencetak ke dokumen HTML;
➢ dan Fungsi alert() digunakan untuk mencetak ke jendela dialog.

138
 Hasilnya :

Gambar 11.2 Menampilkan Alert

Setelah di klik OK

Gambar 11.3 Menampilkan Variabel

Arti tambah (+) pada contoh di atas berarti menyambung, bukan mengalikan.

139
 4) Mengisi Ulang Variabel
Variabel dianggap dapat diubah karena memungkinkan manipulasi data di sekitarnya (berubah).
Contoh:

Mengapa kita tidak menggunakan kata kunci var saat mengatur variabel ulang nilai?
Karena kata "var" diperlukan saat membuat variabel saja, Sebaliknya, kita cenderung menulis
seperti yang terlihat di atas saat ingin makan telur. Setiap kali kita menggunakan kata "var", itu
berarti kita membuat variabel baru daripada mengubah yang sudah ada.
11.2 TIPE DATA
Data menurut jenisnya adalah variasi data yang dapat dicocokkan dalam suatu variabel. Ada banyak
jenis data dalam program Javascript:
• String (teks)
• Integer atau Number (bilangan bulat)
• Float (bilangan Pecahan)
• Boolean
• Object
Javascript adalah bahasa dengan penekanan kuat pada pengetikan dinamis, oleh karena itu tidak
seperti bahasa dengan penekanan kuat pada pengetikan statis seperti C, C++, Java, dan sebagainya, di
mana tipe data harus ditentukan pada saat pembuatan variabel, tidak memerlukan ini. (harus
mendeklarasikan tipe data).
Contoh:

Javascript akan secara otomatis mengidentifikasi jenis data yang kami berikan untuk variabel
tersebut.
Penjelasan Variabel contoh diatas sebagai berikut:
• name memiliki tipe data String;
• age memiliki data integer;
• single memiliki data boolean.

Hal ini juga dapat dibuktikan dengan menggunakan jenis kata kunci typeof.
Contoh:

Hasilnya pada console:

140
 Gambar 11.4 Menampilkan tipe data dengan console

Bagaimana lagi kita bisa belajar tentang tipe data selain dengan menggunakan typeof? Dengan
menggunakan metode eksekusi, kita dapat memahaminya.
Contoh:

11.3 OPERATOR
Operator merupakan konsep kunci yang perlu dipahami dalam suatu program tertentu. Karena
fakta bahwa kami akan sering menggunakannya untuk melakukan berbagai operasi di dalam zona
berbahaya lunak. Apa operatornya?
Misalkan ada variabel seperti ini

Bagaimana cara menjumlahkan a dan b ? kita dapat menggunakan tanda plus (+).

Hasil penjumlahan akan disimpan pada variable c. Itulah salah satu contoh dari operator. Operator
adalah simbol yang digunakan untuk melakukan operasi pada satu nilai dan variabel.
Operator program pemrograman enam jenis:
➢ Operator aritmatika;
➢ Operator Asignment (Penugasan);
➢ Opeartor Perbandingan (relasi);
➢ Operator Logika;
➢ Operator Bitwise;
141
 ➢ Operator Ternary;
Sebenarnya disetiap Bahasa pemrograman apapun, operator wajib ada.

a) OPERATOR ARITMATIKA
Operator matematika adalah orang yang melakukan operasi matematika misalnya
pengurangan, penjumlahan, pembagian, perkalian, dll. Operator dalam matematika terdiri dari:

Contoh :

Hasilnya :

Gambar 11.5 Operator Aritmatika

Contoh lain yang di cetak lengkap dengan document.write

142
Hasilnya :

Agmbar 11.6 mencetak operator dengan document write

Penggunaan tanda petik ` … ` berfungsi untuk mencetak seluruh syntac javascript. Sedangkan
penggunaan tanda ${..} di gunakan untuk mengambil value dari variable yang ada di dalam
kurung {}. Atau sebenarnya bisa di tulis dengan cara

Penggabungan Teks
Dalam Javascript, jika Anda melakukan operasi pada suatu jenis data string atau tex dengan
menggunakan tanda tambah (+), yang terjadi adalah penggabungan, bukan tanda tambah.
Contoh:

Maka hasilnya :
143
 Kenapa bukan 12? Karena kedua angka yang dimaksud adalah tipe data string. Perlu diingat
bahwa dia duduk dengan pensil. Silahkan coba syntac dibawah ini melalui console dan amati
hasilnya:

Gambar 11.7 Penggabungan Teks

b) OPERATOR PENUGASAN
Operator penugasan adalah operator yang digunakan untuk memberi perintah pada variabel.
Bias selalu digunakan untuk membuat variabel.
Contoh:

Variabel a memberikan instruksi untuk menambahkan angka 19.

Operator penugasan terdiri dari:

Operator penugasan mirip dengan operator dalam matematika. Saya juga menggunakannya
untuk operasi matematika.
Contoh:

144
Hasil:
Variabel jumlahView akan bertambah satu.
Maksudnya dari JumlahView += 1 adalah sebagai berikut :

Singkatnya:
Isi variabel "jumlahView" dengan peningkatan lebar dari nilai sebelumnya menggunakan sudut
1++ dan — dapat digunakan untuk mengidentifikasi operator dengan armada besar dan
fluktuatif yang ditetapkan untuk beroperasi sebagai satu kesatuan.
Contoh:

Sehingga nilai variabel a akan menjadi 3. Oleh karena itu, pertanyaannya adalah: Bagaimana
hubungan operator penugasan dan operator aritmatika? Operator aritmatika hanya melakukan
operasi yang melibatkan matematika, sedangkan operator penugasan melakukan operasi
matematika dan pengisian.
Berikut adalah contoh operatornya:

145
 Hasilnya :

Gambar 11.8 Operator Penugasan

c) OPERATOR RELASI / PERBANDINGAN

Operatur relasi ini digunakan untuk membandingkan dua bilangan dikenal sebagai operator
perbanding atau relasi. Operator untuk perbandingan akan mengembalikan nilai boolean benar
atau salah.
Operator untuk koneksi terdiri dari:

Contoh :

146
 Hasilnya :

Gambar 11.9 Operator Relasi

Satu-satunya hal yang akan berubah saat menggunakan simbol == adalah hanya akan
membandingkan nilainya saja. Sebaliknya, penggunaan === selain nilai, dia juga akan
dibandingkan dengan jenis tipe data. Contoh :

Mengapa Nilai B tidak benar? "4" (string) dan 4 (integer) Tipe dataanya berbeda.

d) OPERATOR LOGIKA
Untuk operasi yang melibatkan dua nilai boolean, logika operator digunakan. Operator ini
terbuat dari :

147
 Contoh :

Hasilnya :

Gambar 11.10 Operator Logika

e) OPERATOR BITWISE
Nama operator yang digunakan untuk operasi berbasis bit adalah operator bitwise (biner).
Operator ini terdiri dari:

148
 Operator ini bekerja dengan tipe data berikut: int, long, short, char, dan byte. Operator ini
akan berpindah dari bit ke bit. Sebagai contoh, kita memiliki variabel a = 60 dan b = 13. Jika
dibuat dalam bentuk biner, hasilnya adalah sebagai berikut:

(Perhatikan biner, angka 0 dan 1) Setelah itu, operasi bitwise dilakukan.

Konsensus pada dasarnya sama dengan Operator Logika. Dengan kata lain, Bitwise digunakan
untuk mata uang.
Agar lebih jelas, baca berikut ini:

149
 Hasilnya :

Gambar 11.11 Operator Bitwise

f) OPERATOR TERNARY
Ternary adalah operatornya sekarang. Operator ternary adalah contoh operator dengan tiga
asal bagian yang berbeda. Operator -- operator sebelumnya hanya memiliki dua kantong, yaitu
kantong kanan dan kiri. Operator biner digunakan di sini. Ada bagian tengah, kiri dan kanan
untuk operator trinary secara terpisah.

150
Operator ternary dalam Javascript biasanya digunakan untuk membuat pernyataan if/else.
Tanda tanya dan titik dua merupakan simbol operator untuk ternaries (?:). Bentuk dengan cara
ini :

Ketahuilah bahwa Anda dapat menyatakan suatu <kondisi> dengan ekspresi yang menunjukkan
benar atau salah. Jika kondisi benar maka dipilih “benar”, begitu pula jika kondisi salah maka
dipilih “salah”. Operator ini unik, karena memunculkan pertanyaan.

Gambar 11.12 Operator Ternary

Pada contoh di atas, “Kamu suka aku” mengacu pada pertanyaan atau kondisi yang akan
diperiksa. Jika rahangnya kencang, katakan itu. Mirip dengan itu, tidak akan. Lebih jelasnya, saya
akan mengatakan bahwa Anda harus melanjutkan.

Hasilnya

Gambar 11.3 Pernyataan Operator Ternary

Jika di klik cancel

151
Gambar 11.4 Pernyataan Operator Ternary dipilih cancel
Dan jika di klik ok

Gambar 11.4 Pernyataan Operator Ternary dipilih OK

152
 BAB 12
PERCABANGAN & PERULANGAN

TUJUAN :
a. Mahasiswa Mampu Memahami dan Mengimplementasikan Percabangan dengan
JavaScript
b. Mahasiswa Mampu Memahami dan Mengimplementasikan Perulangan dengan JavaScript

Overview :
Pada sub Bab ini akan di bahas percabangan dan perulangan. Percabangan adalah metode
yang digunakan untuk menyampaikan pesan ketika kondisi target program ditemui. Jumlah kondisi
mungkin satu, dua, atau lebih. Dengan menggunakan percabangan ini, para programmer dapat
mengendalikan maupun mengontrol arah coding dengan mudah sesuai dengan logika.
Sedangkan perulangan merupakan Perulangan adalah jenis kontrol program yang berguna
untuk memastikan skrip ditulis dengan benar, terutama untuk program yang menggunakan proses
berulang-ulang. Frasa ini sering digambarkan sebagai pengulangan atau perulangan. Jadi dengan
menggunakan perulangan, dapat menghemat space memori maupun memperingkas penulisan coding
yang berulang – ulang.

153
12.1 PERCABANGAN
Apa itu percabangan dan mengapa disebut percabangan? Buat yang belum pernah belajar tentang
algoritme dan flowchart, mungkin ini istilah yang baru pertama kali kamu dengar. Isilah ini sebenarnya
untuk menggambarkan program alur yang bercabang. Pada flowchart, logika "jika...maka" ditampilkan
dalam bentuk cabang.

Gambar 12.1 Percabangan

Ini disebut sebagai cabangan. Struktur ini selain di sebut sebagai percabangan juga disebut
dengan Kontrol decision, flow, struktur kondisi, structure if, dan sebagainya. Percabangan akan dapat
membuat perangkat lunak responsif dan memberikan data sesuai dengan kondisi yang kami tentukan.
Ada enam jenis cabang dalam Javascript yang perlu dipahami.

a) Percabangan if
Merupakan jenis percabangan yang hanya memiliki satu blok pilihan bila keadaan sudah stabil.
Pertimbangkan diagram alur berikut:

Gambar 12.1 Percabangan IF

154
Flowchart di bawah ini dapat dibaca seperti ini: "Jika seluruh pembelian Anda melebihi Rp 100.000,
maka ucapkan "Selamat", dan Anda berhak mendapatkan hadiah." Bagaimana jika saya memiliki
100.000 rupiah?
Sehingga pesan tidak tersampaikan.
Contoh dalam program Javascript:

Hasilnya :
Jika kurang dari 100000

Gambar 12.3 Contoh 1 Input Percabangan IF

Gambar 12.4 Contoh 1 Output Percabangan IF

Jika lebih dari 100.000

155
 Gambar 12.5 Contoh 2 Input Percabangan IF

Gambar 12.6 Contoh 2 Output Percabangan IF

Perhatikan :

Ini disebut sebagai blok. Blok program ditulis dalam Javascript, yang diawali dengan kalimat “Buka
Kurung Kurawal” dan diakhiri dengan kalimat “Tutup Kurung Kurawal”. Jika hanya ada satu
ekspres atau frase dalam satu blok, mungkin tidak perlu mencetak lengan kemeja.

Jika hanya ada satu baris ekspresi atau kalimat dalam satu blok, tanda kurung boleh tidak di tulis.

b) PERCABANGAN IF – ELSE
If/else percabangan adalah contoh percabangan dengan dua blok masukan. Pilihan pertama
untuk kondisi yang parah, dan Pilihan kedua untuk kondisi yang ringan (selain itu). Perhatikan
flowchart berikut:

Gambar 12.7 Percabangan IF – Else

156
Ini adalah diagram alur untuk pembuatan kata sandi. Jika kata sandi benar, pesan "Selamat
Datang Bos!" akan ditampilkan pada blok pesan tersembunyi." Tetapi jika Anda login, Anda akan
mendengar pesan berikut: "Password, salah, coba lagi!" Kemudian, karena itu bukan bagian dari
percabangan blok if/else , pesan yang saat ini berada di blok abu-abu akan dilaporkan kembali.
Perhatikan busur panah, setiap blok harus bergerak ke tengah.

Gambar 12. 8 Penegasan Percabangan If – else

Silahkan simak program dibawah ini !

Hasilnya
Jika diisi password salah

Gambar 12.9 Contoh if-else dengan value salah

Jika diisi dengan password yang benar

157
 Gambar 12.10 Contoh if-else dengan value benar

c) PERCABANGAN IF – ELSE – IF
If/else/if adalah jenis klausa yang memiliki lebih dari dua blok klausa. Lihat diagram alur di bawah
ini:

Gambar 12.11 Percabangan If – Else - If

Perhatikan blok yang memiliki sinyal peringatan. Ini adalah blok untuk klausa if-else-if. Sejumlah
blok yang Anda inginkan dapat ditambahkan.
Contoh :

158
Hasilnya :

Gambar 12.12 Contoh Percabangan If – Else – If

Karena hanya ada satu baris perintah dalam program di atas, kami tidak menggunakan kurung
kurawal untuk membuat blok kode if/else/if. Yaitu, grade = ….
Jika kita menggunakan kurung kurawal, maka program diatas akan terlihat seperti ini :

159
d) PERCABANGAN SWITH – CASE
Klausa switch/case adalah jenis alternatif dari klausa if/else/if.. Strukturnya seperti ini:

Kami dapat membuat kasus (case) yang diinginkan di kotak saklar. Pada <value>, Anda dapat
membandingkan nilai saat ini dengan nilai masa depan variabel. Setiap kasus harus dimulai
dengan jeda. Selama pihak yang gagal masih memimpin, tidak perlu membuka segel. Istirahat
diperlukan agar program tetap fokus pada kasus berikutnya setelah kasus selesai.
Contoh:

160
 Haslinya :

Gambar 12.13 Contoh switch Case

Selain itu, sakelar atau kasing dapat dibuat dengan cara yang sama:

1. Berikan nilai sebenarnya ke sakelar sehingga program dapat memasuki blok sakelar.
2. Kemudian, di dalam blok sakelar, buat kondisi dengan menggunakan casing.
Hasilnya akan sama seperti dalam kasus pernyataan if/else/if.

e) PERCABANGAN DENGAN OPERATOR TERNARY

Percabangan if/else adalah bentuk lain dari percabangan yang menggunakan operator ternary.
Bentuk singkatnya dari if/else bisa dibilang.
Contoh:

161
 Fungsi toUpperCase() berfungsi untuk mengonversi teks yang dimasukkan menjadi huruf kapital
semua.

Gambar 12.14 Contoh Operator Ternary Benar

Gambar 12.15 Contoh Operator Ternary Salah

Opertor ternary berperan sebagai percabangan if/else:

Jika kondisi yang berada di kurung seperti—(jwb.toUpperCase() == "IYA")— memiliki nilai true,
maka jawaban variable akan sama dengan ‘Benar’.
Namun jika bernilai false, maka jawaban variable akan bernilai ‘Salah’.

f) PERCABANGAN BERSARANG (NESTED)

Selain itu, di dalam setiap cabang cabang, Anda dapat membuat blok cabang cabang. Ini disebut
sebagai nested if atau bersarang.
Contoh:

162
Hasilnya :

Gambar 12.16 Contoh Operator Bersarang Benar

Jika salah

Gambar 12.17 Contoh Operator Bersarang Salah

163
 Namun demikian dalam menyusun syntac seperti diatas sebenarny ada cara lain (tidak
menggunakan perulangan bersarang), namun menggunakan operator logika “&&” seperti :

12.2 PERULANGAN
Perulangan, atau kadang-kadang disebut sebagai "looping", adalah proses yang dilakukan
secara diam-diam di latar belakang batas yang sudah dipahami. Menggunakan proses perulangan
dapat membuat penulisan kode komputer menjadi lebih efektif. Jika di minta untuk mencetak tulisan
secara berulang “Universitas Stekom” di website sebanyak 10 kali, mungkin ada yang akan membuat
dengan perintah :

Memang tidak salah dengan menggunakan teknik seperti diatas, namun demikian hal tersebut akan
membuat syntac menjadi panjang, apalagi jika disuruh mencetak sebanyak 1000 kali. Hal tersebut
dapat diatasi dengan teknik Perulangan.
Tidak peduli seberapa banyak Anda tahu, perulangan akan membantu Anda menggunakan
kode berulang-ulang. Ada tiga jenis ulang dalam Javascript. Biasanya, perulangan ini terbagi menjadi
dua. Loop yang tidak dapat dihitung dan dapat dihitung.
Perbedaanya:
Counted Loop adalah modul perl yang jelas dan sudah memiliki banyak perulangannya.
Uncounted Loop adalah permutasi yang membuat tidak jelas seberapa sering pengguna harus
mengulangnya.
Perulangan yang merupakan Counted Loop:
➢ Perulangan For
➢ Perulangan Foreach
➢ Perulangan Repeat

Perulangan yang merupakan Uncoundted Loop:

➢ Perulangan While
➢ Perulangan Do/WHile

164
1) PERULANGAN FOR
Perulangan untuk adalah perulangan yang sering dijumpai dalam lingkaran tertutup karena sudah
jelas seberapa sering akan terjadi.

Gambar 12.18 Perulangan

Contoh codingnya :

Penting untuk mengetahui kondisi yang ada pada pakaian setelah kata for.
Kondisi ini akan berarti:
➢ Hitungan berawal dari angka 0 (i=0);
➢ Sampai angka berapa hitungannya? Sampai I < 10;
➢ Kemudian setiap perulangannya i akan ditambah dengan +1 (i++);

Fungsi variabel I dalam perulangan for adalah menghitung nilai hitungan.

Dan masing-masing memiliki perulangan. saya selalu diam. Karena kita sudah membahasnya di
bagian i++.
hasil keluaran:

165
 Gambar 12.18 Contoh Perulangan

Perlu diketahui juga nama variable tidak harus “i”, anda bisa mengganti dengan nama lain,
contoh :

Nama variable menggunakan “counter” dan syntac tersebut memulai perulangan dari nol lalu di
setiap perulangan nilai variable counter akan di tambah 3 (counter+3).
Hasilnya :

166
Gambar 12. 19 Contoh Perulangan +3

Apa jadinya jika counter perulangannya dari akanga terbesar ke terkecil? Hal ini biasanya
dilakukan saat mencoba menghitung mundur. Caranya isi harga pembukaan loket dengan harga
pasaran. Misalnya akan dimulai dari 10 dan turun menjadi 0. Pada counter, kita mulai
menghitung dengan 10. Ketika kondisi perbandingan berubah, kita menghasilkan counter > 0.
Artinya perulangan akan dilakukan selama nilai counter lebih besar dari 0. Selanjutnya, di setiap
perulangan, idi dengan cara mengubah pencacah menjadi nilai (-1) atau (counter--). Contoh :

167
 Hasilnya :

Gambar 12.20 Contoh Perulangan Decrement

Mengapa tidak berakhir pada nol (nol)? Menurut kondisi yang kita gunakan, pencacah adalah >
0. Jika pencacah disetel ke nol, asumsi akan salah. Namun, jika kita menggunakan operator yang
lebih dekat hubungannya dengan (>=), maka syaratnya akan terpenuhi jika pencacahnya nol.

2) PERULANGAN WHILE
Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.
Perulangan sekaligus dapat menjadi perulangan yang terhitung loop dengan memberikan
counter di dalamnya.

Gambar 12.21 Perulangan While

168
Misalnya

Syntac diatas akan mencetak hello word pada console sebanyak banyaknya tanpa henti (ini
disebut sebagai invinite loop / perulangan tanpa batas). Bagaimana kita memberikan batas ?
pertama dengan cara confirm user

Gambar 12.22 Perulangan dengan Confirm

Cara kedua dengan mengunakan program

Gambar 12.23 Perulangan denganProgrman

Increment = Penambahan
Decrement = Pengurangan

Gambar 12.24 Perulangan dengan In/Decrement

Contoh program :

169
 Atau bisa juga di tulis dengan

Hasilnya

Gambar 12.25 Contoh Program perulangan confirm

Jika Anda mengklik OK, pesan akan menampilkan confirm itu lagi sambil menghitung jumlah
counter nya (berapak kali di klik OK), namun jika di klik cancel maka akan menampilkan hitungan
perulangan

Gambar 12.26 Contoh Program perulangan confirm OK

Silahkan perhatikan :

Selama variabelnya benar, akan ada bahaya. Kemudian kami menggunakan fungsi confirm() untuk
menampilkan dialog konfirmasi. Selama kita memilih "Ok" di popup konfirmasi, nilai variabel

170
 ulangi akan tetap benar. Namun, jika Anda memilih Cancel, nilai variabelnya akan salah. Ketika
status ulang variabel salah, perulangan akan diamati.

3) PERULANGAN DO – WHILE
Mirip dengan perulangan sementara, perulangan dilakukan. Hal yang sama berlaku: Do/while
akan melakukan perulangan sekali lagi sebelum memeriksa kondisi di dalam suit while.
Bentuk dengan cara ini:

Jadi perbedaan nya :

“Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan
while akan mencek kondisi di depan atau awal (sbelum mengulang)”.

Contoh :

Hasil jika di bandingkan dengan perulangan while jika sama – sama di klik cancel
Do while

Gambar 12.27 Perulangan do while

171
 While

Gambar 12.28 Perulangan while

4) PERULANGAN FOREACH
Biasanya, perilangan foreach digunakan untuk memindai item dalam array. Loop ini adalah loop
terhitung karena jumlah loop akan dikurangi dengan panjang dari array. Ada dua cara
menggunakan foreach perulangan di Javascript:
- Gunakan “for” dengan operator “in”
- Gunakan “method forEach()”

Contoh:

Berikut beberapa contoh ekspresi "foreach" tanpa operator “in”:

Dengan menggunakan operator seperti ini, perilangan yang sekarang bisa dibuat lebih kuat:

Kedua syntac diatas menjadi seperti ini :

Gambar 12.29 Perulangan foreach

Pendekatan kedua untuk membuat perulangan masing-masing adalah dengan menggunakan

fungsi forEach() dari sebuah array.
Contoh :
172
Parameter fungsi callback dari metode forEach(). Terbukti, Anda dapat menggunakan fungsi
panah seperti ini:

Hasilnya

Gambar 12.30 contoh perulangan foreach

173
5) PERULANGAN DENGAN METODE REPEAT()
Perulangan dengen metode atau fungsi repeat() termasuk dalam loop penghitungan
perulangan. Fungsi ini khusus digunakan untuk mengedit satu tulisan (string). Bisa dikatakan: Ini
adalah single dari perulangan for.
Contoh:
Dalam hal kami mempekerjakan perulangan untuk:

Jika gunakan metode repeat maka akan seperti

Hasilnya

Gambar 12.31 Perulangan repeat

PAHAMI !
Contoh program perulangan lain (Perulangan Bersarang)
Kita bisa membuat perulangan di blok perulangan. Ini disebut sebagai loop bersarang, loop sarangi,
atau loop di dalam loop.
Mari, silakan baca yang berikut ini:

Hasilnya

174
Gambar 12.32 contoh 2 perulangan bersarang

Dalam perulangan tersebut di atas, kami menggunakan dua perulangan untuk. Perulangan pertama
menggunakan Variabel I sebagai Counter, sedangkan Perulangan kedua menggunakan Variabel J
sebagai Counter.

Dengan kata lain:

Hasilnya :
175
Gambar 12.33 contoh 3 pernytaan perulangan bersarang

Seberapa kali anda melakukan perulangan dengan klik OK, setelah anda klik cancel maka akan di
tmpilkan jumlah perulangan namun berupa tanda bintang

Gambar 12.34 contoh 3 hasil perulangan bersarang

Catatatn : “Bila perulangan lebih banyak, maka komputer akan lebih lama memprosesnya. Tentu ini
akan membuat website atau aplikasi kita berjalan lambat. Untuk itu, gunakan perulangan dengan
bijak”.

176
 BAB 13
STRUKTUR DATA ARRAY & DOM

TUJUAN :
a. Mahasiswa Mampu Memahami dan Mengimplementasikan Struktur Data Array di
JavaScript
b. Mahasiswa Mampu Memahami dan Mengimplementasikan Program JavaScript dengan
Menggunakan DOM

Overview :
Menyimpan beberapa value dalam satu variable bisa di lakukan dengan teknik data Array.
Pada sub bab ini nanti akan di bahas cara menyimpan value lebih dari satu ke dalam satu variable.
Serta juga akan di bahas cara menampilkan data urut berdasarkan index dan mengupdate atau
menghapus value pada index ke sekian.
Pada paragraf ini juga akan dibahas DOM (Document Object Model). Tugas pertama dan
terpenting Javascript di web adalah membuat header situs web yang dinamis. Ini dapat dilakukan
dengan Javascript menggunakan DOM. Singkatan DOM adalah singkatan dari Document Object
Model. Dengan demikian, dokumen HTML yang dimodelkan setelah objek.

177
13.1 STRUKTUR DATA ARRAY
Metode atau proses yang digunakan untuk menyimpan data dalam memori komputer disebut
struktur data. Satu-satunya struktur data yang sering digunakan dalam program adalah array. Saat kita
membuat aplikasi online yang akan menampilkan banyak data seperti contoh di bawah ini

Cara menampilkan data dengan teknis diatas boleh saja dilakukan, namun cara tersebut
kurang efektif. Misalkan nanti ada 100 data atau produk yang akan di tampilkan maka kita harus
membuat variable sebanyak 100x dan juga mencetak document.write sebanyak 100x. ada cara lain
agar penulisan coding lebih sederhana, yaitu dengan menggunakan array.
Struktur data yang dikenal sebagai array digunakan untuk mengelompokkan semua data di
satu lokasi. Setiap elemen data dalam Array memiliki indeks, sehingga memudahkan kita untuk
memahaminya.

Gambar 13.1 Ilustrasi Data Array

Indeks array terus berkembang dari angka nol (0). Batas atas array akan didorong oleh banyaknya data
yang disertakan di dalamnya.

a) Cara Membuat Array pada Javascript

Dalam pemrogrman javascript, array ini dapat dbuat dengan symbol kurung siku […]
Misal:

Oleh karena itu berbagai item akan memiliki bermacam-macam pilihan. Setelah memasukkan data ke
dalam array, setiap titik data kemudian direpresentasikan dengan tanda koma (,).
Contoh:

Javascript memilika sifat dynamic typing yang memungkinkan kita dapat menampung atau mencampur
type data apapun di dalam array.
Contoh :

178
b) Cara Mengambil Data dari Array
Array akan menambahkan semua data dan memberinya nomor indeks sehingga mudah diakses.
Indeks array secara konsisten menyusut dari node 0. Pertimbangkan bahwa kita memiliki array yang
mirip dengan ini:

Bagaimana cara kita mengambil nilai "Mie Ayam"?

Jawabannya seperti ini:

Perlu diingat index dimulai dari angka 0.

Contoh :

Hasilnya

Gambar 13.2 Contoh Menampilkan Index Array

Mencetak isi Array dengan perulangan

Disaat kita akan menampilkan seluruh isi data yang ada di array, bisa menggunakan teknik seperti

Namun demikian, jika data yang akan di tampilkan jumlahnya 100 data maka synctak akan menjadi
panjang sekali. Maka dari itu dapat menggunakan teknik seperti contoh

179
Hasilnya

Gambar 13.3 Contoh menampilkan data array dengan perulangan for

Perhatian!
Gunakan properti length untuk membuat array panjang pada contoh di atas. Ada 4 data dalam produk
array, sehingga panjang properti menjadi 4. Kemudian gunakan properti ini untuk mengurangi jumlah
pengulangan di lapangan.

Kemudian, di dalam blok untuk, kami mengevaluasi produk menggunakan indeks yang sesuai dengan
variabel i.
Contoh cara lain menampilkan data array dengan forEach

180
Hasilnya :

Gambar 13.4 Contoh menampilkan data array dengan perulangan foreach

c) Cara Menambahkan Data ke Dalam Array

Ada dua metode yang dapat digunakan untuk menambahkan data ke array:
- Mengisi menggunakan indeks,
- Mengisi menggunakan metode push ().

Contoh Mengisi dengan database

Sebagai contoh, ini adalah array yang kita miliki:

Ada tiga data dalam array dengan indeks:

0 = Apel,
1 = Jeruk,
2 = Manggis.
Jika Anda ingin menambahkan lebih banyak data ke indeks ke-3, Anda dapat melakukannya dengan
menggunakan sintaks berikut:

181
Sekarng array buah akan berisi 4 data.
Contoh dalam program :

Gambar 13.5 menambahkan data array

"Semangka" berhasil dimasukkan ke dalam array buah. Satu-satunya kelemahan metode ini adalah
Anda perlu mengetahui jumlah titik data atau ukuran array sebelum Anda dapat menambahkan lebih
banyak.
Jika kita memasukkan angka yang benar untuk indeks sembarangan, maka data yang ada di indeks
tersebut akan dihapus.

Gambar 13.6 mengupdate data array

Terdapat teknik lain agar programmer tidak perlu mengetahui berapa jumlah data didalam array nya.
Disini dapat menggunakan method push(). Method push() ini akan menambahkan data kedalam ekor
array atau pada bagian belakang sendiri.
Contoh :

182
Hasilnya

Gambar 13.7 menambahkan data array paling belakang

Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini:

d) Cara Menghapus Array

Mirip dengan menambahkan data ke array, penghapusan data dapat dilakukan dengan salah satu dari
dua cara.
- Gunakan delete;
- Gunakan method pop ().
Contoh menggunakan delete

Gambar 13.8 menghapus data array

Dengan tombol hapus, Anda dapat menghapus nomor indeks tertentu dari data. Sebaliknya,
pop() akan mengembalikan data dari belakang. Jika terjadi penghapusan, dia akan memasukkan ruang
kosong ke dalam array. Akibatnya, sangat tidak mungkin Akerna Array akan terus memiliki Panjang 4.
Metode pop() digunakan dalam pemanggilan metode kedua untuk membalik metode push().
Array yang ada di bagian bawah metode pop() akan dihancurkan. Dalam Javascript, array dapat
digunakan sebagai tumpukan (tumpukan) yang memiliki simbol LILO (Last in Last out).

183
Gambar 13.9 ilustrasi menambahkan dan mengurangi data array
Contoh

Gambar 13.10 contoh menambahkan dan menghapus data array

Jika kita menggunakan fungsi pop() lebih dari tiga kali, array hanya akan menyertakan data [apel]. Data
awal dalam array adalah empat. Metode pop() akan menghapus nilai yang tidak valid atau hilang dari
array.

e) Menghapus Data dari Depan

Dengan menggunakan metode shift, Anda juga bisa mendapatkan data dari masa lalu ().
Contoh:

Maka data yang terhapus adalah "Mawar".

184
f) Menghapus Data pada Indeks Tertentu
Jika Anda ingin memasukkan data ke dalam tinta saat ini, Anda harus menggunakan fungsi atau metode
penyambungan (). Ada dua parameter yang diperlukan untuk fungsi ini:

Keterangan:
- <indeks> adalah indeks dari data dalam array yang akan dimusnahkan;
- <total> adalah jumlah data yang akan dikumpulkan dari indeks tersebut di atas.
Untuk hanya memproses satu bagian data pada satu waktu, merupakan praktik standar untuk
mengganti seluruh angka dengan 1.
Contoh:

Pada console :

Gambar 13.11 menghapus data array paling depan

Pada contoh di atas, jika kita tidak menentukan data “<total>" yang akan hilang, maka semua data dari
indeks "pilih" juga akan hilang.

g) Mengubah isi Array

Mengubah isi array dapat dilakukan dengan cara berikut

Maka "Kotlin" akan diganti dengan "C++".

Percobaan pada console:

185
Gambar 13.12 contoh mengganti data array

h) Method-mothod Array
Selain metode atau fungsi yang sudah kita bahas, ada beberapa metode dalam array yang perlu kita
pahami.

186
1) Method filter()
Fungsi metode filter() adalah untuk mengekstrak data dari array. Parameter wajib untuk metode
filter() adalah fungsi panggilan balik, sama seperti untuk metode forEach().
Contoh:

Hasilnya :

Gambar 13.13 method filter array

Pada contoh di atas, kami menyediakan fungsi panah sebagai fungsi callback yang akan melakukan
pensinyalan terkait array. Karena itu, Anda dapat membuat sesuatu yang jauh lebih rumit dari ini:

2) Method includes()
Tujuan dari metode ini adalah untuk menentukan apakah sepotong data ada dalam array atau
tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di
dalam array.
Contoh:

187
 Hasilnya :

Gambar 13.14 method includes array

3) Method sort()
Method sort() Berfungsi untuk memasukkan data ke dalam array.
Contoh:

Hasilnya

Gambar 13.15 method sort array

13.2 DOM (Document Object Model)

Belajar JavaScript pada intinya terdiri dari dua bidang utama, yaitu JavaScript Inti (juga dikenal
sebagai Core JavaScript) dan API yang disediakan oleh web browser (yang dikenal dengan istilah DOM,
singkatan dari Document Object Model).
"Bahasa Pemograman JavaScript" adalah nama resmi untuk Core JavaScript, juga dikenal
sebagai JavaScript inti. Pada bagian Core JavaScript inilah kita akan belajar tentang aturan

188
pemograman yang umumnya dipelajari seperti cara mendefinisikan variabel, perbedaan tipe data, cara
membuat array, cara menulis struktur IF, dan cara membuat objek.
Bab Inti JavaScript membahas tata bahasa atau "bahasa" JavaScript. Tidak akan terlalu sulit
untuk memahami aturan penyisipan JavaScript jika Anda pernah menggunakan bahasa pemrograman
seperti C++ atau PHP. Perbedaan JavaScript dengan bahasa pemrograman lainnya adalah JavaScript
lebih fokus pada objek. Namun, JavaScript "tidak mengharuskan" menggunakan objek. Ucapkan "tidak
harus" karena Anda dapat membuat beberapa program menggunakan kode yang berfungsi sempurna
tanpa menggunakan objek. Berikut ini adalah fungsi peringatan.
Core JavaScript adalah implementasi lain dari JavaScript yang tidak kompatibel dengan
"lingkungannya"—browser web. Sampai saat ini, JavaScript hanya dikenal sebagai bahasa skrip sisi
klien yang digunakan di browser web. Namun demikian, perkembangan JavaScript saat ini
menghambat penggunaannya di server (salah satunya dengan menggunakan node.js).

a) PENGERTIAN DOM
Tugas pertama dan terpenting Javascript di web adalah membuat header situs web yang
dinamis. Ini dapat dilakukan dengan Javascript menggunakan DOM. Singkatan DOM adalah singkatan
dari Document Object Model. Dengan demikian, dokumen HTML yang dimodelkan setelah objek.
Objek dari dokumen ini menawarkan berbagai fungsi dan atribut/data yang dapat kita gunakan
untuk membuat program Javascript. Disebutkan bahwa API (Application Programming Interface).

Gambar 13.16 Ilustrasi DOM (sumber : petanikode.com)

- DOM bukan hanya untuk dokumen HTML. Selain itu, DOM dapat digunakan untuk
membuat dokumen dalam format XML dan SVG.
- DOM tidak hanya didukung oleh Javascript; itu juga didukung oleh bahasa pemrograman
lain.

1) Bagaimana Menggunakan DOM ?

Seperti yang sudah kita ketahui, tujuan dari DOM adalah untuk memodelkan dokumen
HTML. Dokumen adalah nama objek DOM Javascript. Objek ini berisi semua informasi yang
189
 diperlukan untuk membuat HTML. Jika kita memilih untuk membuka dokumen dalam
Javascript di konsol, maka kode HTML akan ditampilkan.

Pada dokumen objek terdapat atribut dan fungsi yang dapat digunakan dalam
mengelola dokumen HTML. Seperti misalnya fungsi dokumen, tulis ().
Fungsi ini dapat digunakan dalam menambahkan konten ke dokumen HTML.
Misalnya, Anda dapat mengetikkan kode berikut ke editor Javascript atau editor teks.

hasilnya :

Gambar 13.17 menggunakan DOM

190
 b) DOM SELECTOR / MENGAKSES ELEMENT HTML
Objek ini adalah contoh dari dokumen HTML. Objek ini memiliki semua fungsi dan atribut
elemen HTML dan dapat ditampilkan dalam format pohon berikut:

Gambar 13.18 Objek DOM

Fitur objek model JavaScript menyediakan semua alat yang diperlukan untuk membuat HTML dinamis:
- JavaScript memiliki kemampuan untuk memodifikasi setiap elemen HTML di halaman
- JavaScript dapat memodifikasi setiap atribut dalam dokumen HTML.
- JavaScript memiliki kemampuan untuk Mengubah semua aturan CSS dalam dokumen
- Menghapus elemen dan atribut HTML yang ada
- Menambah elemen dan atribut HTML baru
- Bertentangan dengan semua kebijakan HTML yang ada dalam dokumen
- Membuat acara HTML baru dalam dokumen

Ada beberapa fungsi yang dapat digunakan jika Anda ingin mendapatkan elemen saat ini:
- getElementById() berfungsi untuk memilih elemen berdasarkan id atribut.
- Fungsi getElementByName() digunakan untuk mencari elemen berdasarkan nama
atribut.
- getElementByClassName() memiliki fungsi menemukan elemen berdasarkan atribut
kelas.
- getElementByTagName() digunakan untuk mengidentifikasi orang berdasarkan nama
tag mereka.
- getElementByTagNameNS() memiliki fungsi menemukan elemen berdasarkan nama tag.
- querySelector() memiliki fungsi memilih elemen berdasarkan input.
- fungsi querySelectorAll() untuk memilih elemen berdasarkan input.
- Dan Lain Lain.

Penggunaan fungsi yang disebutkan di atas untuk mengakses elemen yang ditargetkan sangat
umum.
Contoh:
Katakanlah kita memiliki kode HTML seperti ini:

191
Jadi, untuk menemukan elemen yang dimaksud di Javascript, gunakan fungsi getElementByI()
sebagai berikut:

Variabel instruksional akan menjadi sebuah objek bagi DOM dari elemen yang dpilih.
contoh lebih lengkap:

Index.html

Hasilnya

Gambar 13.19 Contoh Program DOM

Seperti yang ditunjukkan pada contoh di atas, kami menggunakan seseorang dengan
fungsionalitas dokumen. getElementById(). Kemudian buat objek untuk elemen yang disebutkan

192
di atas. Setelah itu, Anda dapat melakukan apa pun yang Anda inginkan, seperti mengedit teks
dan gaya CSS.
Pertanyaan selanjutnya: Apa yang akan terjadi jika ada lebih dari satu elemen yang dipilih?
Idealnya, Anda harus memilih elemen berdasarkan nama tag atau atribut khusus lainnya.
Jawabannya: Elemen yang masuk akan menjadi array. Karena kami memiliki berbagai elemen.
Baris ini akan menyertakan objek DOM yang terdiri dari anggota populasi yang relevan.

Contohnya:

Pada contoh di atas, kita memiliki tiga paragraf lengkap dengan paragraf yang menamai siswa.
Kemudian kita akan mencoba mengakses paragraf selanjutnya menggunakan Javascript
menggunakan fungsi atau method getElementByClassName().
Hasilnya kemudian dilaporkan ke konsol Javascript.
Sebagai hasilnya,

193
 Gambar 13.20 Contoh 2 Program DOM

Akan ada tiga objek DOM dari paragraf yang terkandung dalam array yang akan berisi paragraf
variabel.
Kami akan bereksperimen dengan mengubah peringatan tekton dari paragraf pertama.
Paragraf pertama akan berakhir pada indeks posisi ke-0 di dalam array.
Lihat tip konsol Javascript berikut:

Kami menggunakan fungsi setInterval() dan setTimeOut() untuk menentukan durasi animasi.
Dalam kode tersebut, rentang waktu (interval) adalah 1000 menit atau satu hari. Namun,
dibutuhkan 500 milidetik atau 0,5 hari untuk mengubah peringatan menjadi ancaman nyata.
Hasil:

194
 Gambar 13.21 COntoh 3 Program DOM

c) MEMBUAT ELEMEN DENGAN DOM API

Selain itu, DOM menyediakan fungsi untuk membuat elemen HTML. Fungsi pertama disebut
createElement ().
Contoh:

Maka, akan tercipta elemen <p> baru. Tapi, itu tidak akan dipublikasikan di situs web.
Kenapa tidak dilaporkan? Karena kita belum menambahkannya ke badan dokumen. Untuk
melampirkannya ke badan dokumen, Anda dapat menggunakan fungsi add ().
Contoh:

Hasilnya
:

195
 Gambar 13.22 Contoh Membuat Elemen dengan DOM API

d) MENGHAPUS ELEMEN DENGAN DOM API

Jika sekarang Anda menggunakan fungsi append() untuk menambahkan elemen, maka Anda
harus menggunakan fungsi hapus untuk menghapus elemen dari daftar ().
Berikut ini contohnya:

hasilnya :

196
 Gambar 13.23 Contoh Menghapus Elemen dengan DOM API

Elemen berhasil diunduh dari situs web, tetapi masih ada di memori. Catatan : Anda bisa
mencoba menghapus perintah pada JS line 17 : Hapus.remove(); maka pesan h2 akan di
tampilkan.

e) CONTOH PROGRAM YANG MEMANFAATKAN DOM

Kami tahu cara mengakses elemen menggunakan DOM, dan kami juga memahami cara
memperkuat dan menciutkan elemen. Jika pembicara tampak goyah, jalankan program contoh
berikut:

197
Index.html

Hasilnya :

Gambar 13.24 Contoh Progam Yang memanfaatkan DOM

198
f) DOKUMEN DOM
Menemukan Elemen HTML

Mengubah Elemen HTML

Anda bisa melihat dokumen DOM yang lebih lengkap di situs w3school pada :
https://www.w3schools.com/js/js_htmldom_document.asp

199
 BAB 14
MEMBUAT ANIMASI SEDERHANA
DENGAN CSS

TUJUAN :
a. Mahasiswa Mampu Memahami Animasi dengan CSS dan JavaScript
b. Mahasiswa Dapat Membuat Animasi dengan CSS dan JavaScript

Overview :
Tampilan sangat mempengaruhi kenyamanan dari seorang pengunjung website.
Menambahkan animasi yang tidak berlebihan juga mampu memberikan kesan hidup di tampilan
website kita. Pada BAB ini akan di ajarkan membuat animasi frame, keyframe serta animasi membuat
tulisan dengan menggunakan CSS dan Javascript.

200
14.1 MEMBUAT ANIMASI TRANSISI
Pada sub poin ini akan di ajarkan cara membuat efek transisi dengan menggunakan CSS dan javascript
dimana dalam selector javascriptnya menggunakan teknik DOM. Ikuti langkah – langkah di bawah ini
a) TRANSISI DENGAN CSS
1) Buat dokumen HTML seperti di bawah ini dan koneksikan ke CSS
index.html

Style.css

Hasilnya

Gambar 14.1 Animasi Transisi

2) Berikan atribut hover dan active pada id kotak

201
 Lihatkan hasilnya

Gambar 14.2 Hasil Animasi Transisi Warna

3) Perubahan warna sangat begitu cepat. Kita dapat menambahkan efek transisi seperti berikut
ini pada style #kotak

4) Silahkan lihat perubaahannya. Ada beberapa property transisi selain yang di contohkan di
atas. Contoh property lain anda dapat lihat di bawah ini dan silahkan bereksperimen
mencoba nya.
CSS Properti yang dapat dianimasikan :

202
 Contoh ketika mencoba property lain anda tidak perlu menulis ulang property dalam
css. Cukup Anda tambahkan value property yang akan anda coba di belakang value
background-color dengan di pisahkan dengan tanda koma

- Pada value transition-delay (panah kuing) hanya di tulis 1 value. Hal tersebut dapat di
lakukan jika kita menghendaki property background-color dengan width memiliki nilai
atau value yang sama.
- Pada bagian hover dan active jangan lupa di berikan proprety width dengan valuenya
(panah putih).
- Anda juga dapat menulis syntac seperti di bawah ini agar lebih ringkas

- Value property di pisahkan dengan spasi, namun antar property pisahkan dengan koma.
Silahkan lihat perubahnnya, aka nada efek transisi perubahan warna dan bentuk.
5) Perubahan width dengan value input text. Silahkan hapus property transisi width yang ada
pada id kotak sehingga menjadi seperti

203
6) Pada index.html berikan input text dengan type number

Lihat hasilnya, silahkan isi input text tersebut

Gambar 14.3 Transisi dengan Value angka

204
b) TRANSISI DENGAN JAVASCRIPT
1) Atur index.html seperti di bawah ini

2) CSS disini hanya untuk mengatur height width dan warna baground saja

3) File main.js
- Dan berikan perintah pada js nya. Caranya sama sepeti css tadi= property durasi timing
delay

Timing function selain ease dan linier ada juga yang lain : steps(3) menggunakan berapa
langkah

- Kita juga bisa menambahkan perintah disaat transisi berakhir menggunakan keyword
transitionend

205
 Jadi ketika transisi selesai, akan menampilkan dialog alert “Transisi Telah Selesai…”

- Selain enggunakan alert kita jga bisa gunaan untuk hal lain. Contohnya ketika transisi
berakhir dia akan kembali ke ukuran semula

- Atau anda bisa mengarahkan ke halaman web

c) ANIMASI KEYFRAME
Keyframe dalam animasi atau film menurut Wikipedia adalah sebuah gambar yang
mendefinisikan titik permulaan dan akhir dari transisi apapun. Gambar tersebut disebut "frame"
karena posisi mereka pada waktu diukur di frame pada sebuah strip film.
Perbedaan Transisi dan Keyframe

Gambar 14.4 Animasi Keyframe

206
Sekarang kita coba untuk membuat animasi keyframe tersebut.
1) Buatlah file html seperti berikut

2) Buat animasi keyframe dengan css

Selain contoh diatas masih terdapat property animasi lain seperti

NO PROPERTY KETERANGAN
1 animation-timing-function: ease; Perubahan atau jalannya animasi. Value ease
dan linier
2 animation-iteration-count: 1; akan mengulang berapa x. 1 atau 2 atau 3 dst,
atau infinite (mengulang terus)
3 animation-direction: normal; ini arah animasi. Reverse terbalik. Alternate
bolak- balik. Alternate-reverse bolak balik
dimulai dari kanan
4 animation-play-state: running; Memulai atau menghentikan animasi. running
berjalan, paused berhenti
5 animation-delay: 0s; waktu tunggu sebelum animasi berjalan
6 animation-fill-mode: none; Akhir dari animasi. None animasi kembali ke
posisi awal, forwards animasi berakhir di posisi
akhir(count set 1)
Dalam penulisan property dapat juga disingkat seperti dibawah ini

207
 Namun bberapa value tidak perlu di tulis semua. tulis yang di butuhkan saja (buang yg
settingan default) sehingga

3) Tambahkan titik koordinat X dan Y

4) Anda juga dapat membuat animasi lebih dari satu.

208
5) Dapat juga di tambahkan perubahan warna

d) Contoh lain
1) Show hiden password
Index.html

Style.css

209
Main.js

Hasilnya

Gambar 14.5 Animasi show hidden password

210
 Gambar 14.5 Animasi show hidden password

2) Animasi Text
Index.html

Style.css

211
Main.js

Hasilnya

Gambar 14.6 Animasi Menulis Teks

212
Gambar 14.6 Animasi Menulis Teks

213
 BAB 15
MEMBUAT ANIMASI SEDERHANA
DENGAN CSS

TUJUAN :
a. Mahasiswa Mampu Memahami Cara Mengonlinekan Website
b. Mahasiswa Dapat Mengonlinekan Website yang sudah di Buatnya

Overview :
Pada BAB ini akan di ajarkan cara mengonlinekan website secara gratis. Semua mahasiswa di
wajibkan mengonlinekan web masing – masing Karena nanti dalam penilaian UAS, mahasiswa harus
mengirimkan link web online nya ke pada Dosen.

214
15.1 PENGANTAR WEB ONLINE

Jika Anda membuat sebuah blog dengan menggunakan Wordpress.com atau Blogger.com,
maka web tersebut akan langsung Online. Namun jika Anda membuat web dengan pemrograman
HTML, atau PHP dan sejenisnya yang menggunkan bahasa pemprograman, maka Anda harus meng
Onlinekan web tersebut secara manual. Pada bab ini akan di bahas cara meng online kan web HTML
secara gratis. Namun sebelumnya Anda harus mengenal terlebih dahulu istilah Hosting dan Domain.
Hosting berfungsi sebagai sarana untuk menyimpan semua file website agar dapat diakses
secara online. Setiap file, termasuk tema, plugin, teks, media, kode HTML dan CSS, dan bahkan draf
konten, dihosting. Sebaliknya, domain Anda berfungsi sebagai alamat situs web Anda sehingga
pengguna dapat dengan mudah mengaksesnya menggunakan browser. Misalnya, ketika seseorang
ingin mengakses website Niagahoster, mereka hanya perlu mengetikkan www.niagahoster.co.id di
browser mereka sebelum website Niagahoster dimuat. Domain tidak harus selalu berakhiran .COM.
Anda memiliki opsi untuk memilih salah satu dari banyak ekstensi domain yang tersedia. Diawali
dengan .CO.ID,.WEB.ID,.NET,.INFO,.ONLINE,.SITE,.WEBSITE, dan diakhiri dengan .XYZ

Gambar 15.1 Analogi Hosting dan Domain (sumber Niagahoster)

15.2 MENGONLINEKAN WEB

000webhost adalah layanan hosting gratis dan mudah digunakan. Anda tidak perlu lagi
menghabiskan uang untuk web hosting, apalagi Anda baru memulai website. Selain itu, menyiapkan
situs web dengan 000webhost tidaklah sulit; pemula bahkan dapat melakukannya secara efektif.
Penggunaan sistem antarmuka yang mudah digunakan menyebabkan seluruh proses instalasi berjalan
dengan cepat. Mari, ayo pergi bersama.
1. Silahkan Anda mendaftar 000webhost terlebih dahulu, kunjungi link di
https://id.000webhost.com/ klik daftar

215
 Gambar 15.2 halaman utama 000webhost

2. Maka Anda akan di arahkan ke halaman sperti ini. Anda sebenarnya bisa login menggunakan
FB atau Google langsung. Namun disini yang saya ajarkan adalah mendaftar manual saja
meskipun nantinya juga akan menggunakan email. Silahkan klik pada bagian Daftar pada
bagian bawah kiri

Gambar 15.3 Halaman login 000webhost

3. Anda akan dikirim ke gedung yang mirip dengan yang ada di bawah., silahkan isikan email Anda
yang masih aktif dan buatlah password untuk akun 000webhostnya kemudian klik Daftar. Note
: Kata sandi harus tepat satu angka, satu huruf besar dan kecil, dan tepat delapan karakter,
atau lebih.

216
 Gambar 15.4 Halaman Register 000webhost

4. Stelahk klik daftar maka webhost akan mengirim pesan verifikasi ke email yang Anda daftarkan
tadi.

Gambar 15.5 Pendaftaran selesai

5. Silahkan masuk ke Email Anda untuk melakukan verifikasinya. Klik pesan dari 000webhost.

Note : Jika tidak terdapat pesan ini di kotak masuk, Silahkan anda coba cari di folder spam

6. Setelah membuka pesan nya, silahkan klok Verifikasi Email dan tunggu sampai selesai

217
 Gambar 15.6 Verifikasi Email

Gambar 15. Verifikasi Berhasil

7. Setelah verifikasi selesai, Anda akan dibawa ke gedung yang ditunjukkan pada paragraf di
bawah ini. Anda juga dapat mencari di goolge dengan kata kunci login 000webhost atau anda
dapat mengunjungi langsung link hasi pencarian tersebut di
https://id.000webhost.com/members/website/list silahkan klik LET’S CREAT SOME MAGIC

218
 Gambar 15.8 Halaman webhost setelah di verifikasi email

8. Kemudian pilih lainnya yang paling bawah

Gambar 15.9 Menu lainnya

9. Isikan nama website yang Anda kehendaki, disini saya contohkan nama website saya
appstoredendy. Dan silahkan ganti password nya agar lebih mudah di ingat. Ini berbeda
dengan password akun 000webhost yang ada di tahap sebelumnya. kemudian klik kirim.

219
 Gambar 15.10 penamaan projek

10. Jika nama website tersedia maka pendaftran akan berhasil. Namun jika gagal ada kemungkinan
nama tidak tersedia karena nama sudah di gunakan orang lain / menggunakan kata hubung /
menggunakan karakterter yang tidak di dukung. Silahkan Anda ganti dengan nama lain atau di
tambahi kata lain tanpa tanda hubung.
11. Jika sudah berhasil akan di tampilkan halaman seperti berikut ini dan silahkan klik Upload Your
Site

Gambar 15.11 Pemilihan Jenis Projek

220
12. Akan di tampilkan halaman seperti berikut ini

Gambar 15.12 Halaman file 000webhost

13. Disitulah nanti file – file HTML, CSS, image JS dan lain – lain mengenaik website Anda akan
disimpan (didalam folder publick_html).
14. Silahkan klik upload file pada bagian kanan atas

Gambar 15.13 Upload File di 000webhost

15. Klik select file

Gambar 15.14 Browse File

221
16. Pilih semua file yang berhubungan dengan web Anda kemudian klik Open

Gambar 15.15 Pilih File yang akan di upload

17. Klik Upload

Gambar 15.16 Daftar file yang akan di upload

222
18. Seluruh file telah terupload

Gambar 15.17 File setelah berhasil di upload

19. Setelah itu anda masukkan seluruh file yang terupload tadi ke dalam folder Public_html.
Centang smua file dan pilih move dan change folder target, pilih public_html dan ok

Gambar 15.18 Pindah File

Gambar 15.19 Pilih Tujuan Folder

223
 Gambar 15.20 Tombol Simpan Memindahkan File

20. Jika anda belum mengupload file HTML atau belum memasukkan file HTML ke folder
public_html maka halaman web anda akan seperti di bawah ini

Gambar 15.21 Halaman Depan Web Sebelum

21. Setelah seluruh file di pindah ke public_html maka web anda sudah tampil online

Gambar 15.22 Halaman Depan Web Sesudah

224
22. Dilain hari anda dapat setting atau membuka kembali web anda dengan mengunjungi
https://id.000webhost.com/login-cpanel?from=panel atau cari di web browser dengan kata
kunci login 000webhost isikan email dan paswrod ketika mendaftarkan akun webhost tersebut
(pada tahap ke 3 tutorial ini)

Gambar 15.23 Halaman Login webhost

23. Anda akan diarahkan ke halaman berikut ini. Disini anda bisa mengelola web anda dan juga
melihat web anda secara online

Gambar 15.24 Halaman Setelah Login

225
24. Halaman kelola

Gambar 15.25 Halaman Kelola Web

226
 Penutup
Saya sangat bersyukur dapat menyelesaikan buku ini, kemudian saya berharap buku ini akan
memungkinkan Anda untuk menguasai dasar-dasar HTML, CSS dan Javascript untuk membuat situs
web Anda sendiri atau untuk mengedit tampilan template atau tema di situs web.
Sekali lagi jika menurut anda ebook ini bermanfaat, mohon untuk diberikan kepada teman
atau saudara agar ilmu yang terkandung dalam ebook ini dapat berkembang bagi yang membutuhkan.

227
 DAFTAR PUSTAKA

[1] Bernadhed, Mulia Sulistiyono (2017); WEB PROGRAMING

[2] George Reed (2018). Web Design with HTML, CSS, JavaScript and jQuery Set. John Wiley &
Sons Inc
[3] Didik Setiawan (2017). Buku Sakti Pemrograman Web: HTML, CSS, PHP, MySQL & Javascript.
Start Up
[4] Moh. Muthohir (2021). MUDAH MEMBUAT WEB BAGI PEMULA (MENGENAL HTML, HTML5,
CSS DAN JAVASCRIPT)
[5] https://www.w3schools.com/
[6] https://www.php.net/
[7] https://www.youtube.com/
[8] https://id.000webhost.com/
[9] https://www.petanikode.com
[10] https://www.researchgate.net
[11] https://www.digilib.stiestekom.ac.id
[12] https://www.pakarkoding.com
[13] https://www.slideshare.net
[14] https://www.bootup.ai
[15] https://www.scribd.com
[16] https://notepad-plus-plus.org/downloads/.
[17] https://www.adobe.com/id_id/products/dreamweaver/free-trial-download.html
[18] https://www.sublimetext.com/download
[19] https://code.visualstudio.com/download
[20] https://www.mozilla.org/id/firefox/new/
[21] https://www.google.com/intl/id_id/chrome/
[22] https://www.microsoft.com/id-id/edge/home?form=MA13FJ

228