BAB III

Pemanfaatan Penyimpanan Berbasis Cloud Untuk Pengarsipan &

Dokumentasi
A. Pemahaman Google Drive
Google Drive adalah layanan google untuk media penyimpanan data online
(daring) berbasis cloud atau Internet yang pertama kali beredar pada
tanggal 24 April 2012. Pada dasarnya layanan Google Drive sama seperti
cloud storage semacam dropbox atau OneDrive.
Google drive dapat diakses melalui dekstop ataupun smartphone. Pada
beberapa jenis ponsel Google Drive atau GDrive menjadi aplikasi bawaan
yang terinstal secara otomatis di sistem.
Di google drive kita dapat menyimpan file-file berupa dokumen, gambar,
audio ataupun video dengan kapasitas gratis sebesar 15 Gigabyte. Jika
ingin lebih dari itu maka kita harus upgrade account.
Sementara itu, kita dapat menyimpan, mengedit dan mengambil file dari
google drive dengan catatan perangkat komputer atau smartphone harus
terhubung dengan jaringan internet.
B. Fungsi Google Drive
1. Untuk Menyimpan File, Fungsi utama Google Drive adalah sebagai
media penyimpanan data, dengan Google Drive kita dapat menyimpan
data tanpa harus menyediakan storage atau media penyimpanan
offline seperti flashdrive ataupun hardisk.
2. Berbagi File, Dengan menggunakan Google Drive kita dapat berbagi
file secara langsung tanpa perlu melakukan konfigurasi yang rumit, kita
secara langsung dapat mengundang pengguna lain melalui Link yang
kita berikan atau undangan melalui alamat email
3. Edit File, Kita dapat melakukan editing data langsung tanpa harus
mengunduhnya. GDrive mendukung fitur edit data teks yang
terhubung dengan google spreadsheet, google docs maupun file
presentasi google slide.
4. Melakukan Backup Data, selain hanya sebagai penyimpanan, bila anda
memiliki lebih dari 1 email anda dapat gunakan akun google drive
sebagai media penyimpanan backup anda.
C. Fitur Google Drive
1. Integrasi Dengan Produk Lain, Fitur Integrasi ini menjadi bagian
terpenting pada Google Drive. Pasalnya fitur ini terintegrasi dengan
 produk google lainnya seperti Google Doc, Google Sheets, Atau Google
Slide.
2. Kapasitas Penyimpanan, Dengan mengimplementasikan teknologi
berbasis cloud anda mendapat Kapasitas dari Layanan Google Drive ini
sebesar 15GB untuk yang free license. Sedangkan untuk Google Drive
Premium anda mendapat 30GB bahkan hingga 2Terabyte / 2.000GB.
3. Sharing & Privasi Hak Akses, Kemudahan Google Drive dalam berbagi
file. Dengan hanya menggunakan fitur sharing anda cukup memilih
email rekan anda pada isian form sharing maka secara otomatis rekan
anda sudah mendapat akses file tersebut. Tidak hanya itu, anda juga
bisa memberikan hak akses bagi orang lain, seperti hanya bisa
view/lihat konten (tidak bisa mengedit/menghapus file anda), atau
bisa ikut mengedit file tersebut sehingga anda bisa berkerja team.
4. Search File, anda dapat melakukanpencarian file berdasar jenis format
file yang dicari, Pemilik file, tanggal modifikasi, dan lainnya. Sehingga
sangat mempermudah pengguna bila mempunyai banyak data yang
ada dalam Penyimpanan Gdrive.
5. Fitur Penerjemah Dokumen, fitur ini terhubung dengan Google
Translate. Anda bisa memasukkan file dokumen anda kemudian
membuka file tersebut di perangkat dokumen yang tersedia di Google
Drive. Kemudian klik menu Tools, setelah itu anda pilih Translate
Document dan memilih bahasa dokumen yang anda inginkan.
6. Konversi file Pdf ke Text, yaitu Fitur merubah file dengan format PDF
menjadi Text. Untuk bisa menggunakan fitur ini anda bisa membuka
file PDF anda di Google Drive, kemudian Download As Microsoft Word.
Setelah file yang didownload berformat .docx anda bisa mengeditnya.
7. Baru, fitur ini berfungsi untuk menambahkan file yang akan di upload
ke drive
8. Drive Saya, untuk menampilkan folder dan file yang ada di drive kamu
9. Komputer, untuk melihat komputer yang terhubung ke drive (butuh
sinkronisasi).
10. Di Bagikan dengan Saya, berisi file file yang di share dengan akun kita
atau file yang pernah dibuka melalui
11. Berbintang, berisi file file mana saja yang diberi bintang untuk
mempermudah pencarian file
12. Sampah, berisi file dan folder yang pernah dihapus.
13. Buka Dengan, digunakan untuk membuka file atau folder dengan
aplikasi lain.
 14. Bagikan , membagikan file atau folder pada pengguna lainnya.
15. Dapatkan Link, untuk melihat link sharing secara langsung.
16. Tampilkan lokasi file, untuk melihat lokasi detail file berguna bila file
berada didalam banyak folder.
17. Tambahkan pintasan ke Drive, untuk membuat pintasan untuk
mengakses file pada google drive lain tanpa perlu
menyalin/mengupload file sendiri.
18. Pindahkan ke, untuk memindahkan file kedalam folder lainnya.
19. Tambahkan ke Berbintang, untuk mempermudah pencarian dengan
menambah memberi tanda bintang pada file.
20. Ganti Nama, berfungsi untuk mengganti nama file / folder.
21. Lihat Detail, untuk melihat detail dari file.
22. Kelola versi, untuk mereplace/menimpa file dan melihat Riwayatnya.
23. Buat Salinan, untuk menyalin/menduplikasi file.
24. Download, mendownload file, bila mendownload banyak file akan
otomatis dikompress terlebih dahulu menjadi file .RAR
D. Cara Menggunakan Google Drive
Anda dapat mengakses Google Drive melalui link drive.google.com
1. Pada komputer, buka browser anda (Chrome, Firefox, ataupun
browser lain), ketikkan alamat drive.google.com pada kolom
pencarian/kolom url.
2. Setelah jendela tampilan Google Drive terbuka, klik Baru dan klik
Upload File atau Upload Folder.
3. Pilih file atau folder dari komputer Anda.
4. Klik Simpan.
5. File ataupun Folder yang dipilih telah berhasil disimpan secara
otomatis pada Google Drive.
Cara berbagi akses file/folder Google Drive
1. Pada halaman drive.google.com pilih file atau folder yang ingin
dibagikan aksesnya, klik kanan file/folder tersebut.
2. Klik “Bagikan”, akan muncul menu baru, anda dapat mengetikkan
email rekan anda atau juga dapat mengatur “Ubah ke siapa saja yang
memiliki link” jadi semua orang dapat mengaksesnya.
 Beberapa permasalahan yang sering dialami saat menggunakan google drive
adalah
1. Tidak dapat mengakses file karena tidak memiliki izin untuk mengakses
file. Jika Anda membuka link Google Drive dan link tersebut tidak
ditemukan (padahal sebenarnya ada) maka kemungkinan Anda tidak
memiliki akses terhadap file tersebut. Cara memperbaikinya anda cukup
meminta hak akses saat membuka file dan mengirimkan email kepada
pemilik file tersebut untuk meminta akses.
2. Pengunduhan file jumlah banyak tidak berjalan. Unduhan file terlalu
banyak dalam satu waktu yang dapat di akses secara publik. Maka
kemungkinan ada antrean yang membuat Anda harus menunggu.
3. Tidak dapat mengunduh file karena batas kuota download. Bila file
berbentuk document text seperti word ataupun sheet anda bisa klik
kanan pada file lalu pilih “Make a copy” atau “Buat Salinan”, pilih folder
google drive pribadi anda dan copy pada folder tersebut, anda sudah
memiliki file copy tersendiri yang dapat di download.

BAB IV
Pemrograman Dasar Aplikasi Website
A. Pengantar Pemrograman Dasar
1. Memahami bentuk paling dasar dalam membangun WEB
2. Mengerti penggunaan tag-tag HTML
3. Mengenal bagian-bagian dokumen HTML
B. HTML ( HyperText Markup Language )
HTML kependekan Hyper Text MarkupLanguage.
Berawal dari standar SGML (Standard Generalized Markup Language),
HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web.
HTML berupa kode-kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan.
HTML dalam pembangunanan terdiri dari empat konsep dasar.
1. Element, bagian - bagian yang membangun sebuah web.
Elemen dalam sebuah web dapat berupa aturan penulisan sederhana
seperti <h1> hingga <h6> yang merupakan elemen ukuran,<p>
sebagai tempat mengisi sebuah paragraf, <br> sebagai pembatas
untuk memulai tulisan baru. Ada pula yang berupa elemen - elemen
yang menampung gambar seperti <img>, tabel dengan <table>, form
dengan elemen <form> dan banyak lagi.
2. Penulisan Tags, html dibangun dari susunan tag.
Sebagaimana yang pernah disinggung sebelumnya, HTML disusun dari
tags-tags atau barisan tags. Tags dan element dalam HTML sangat
berkaitan sekali dan tak bisa dipisahkan, karena tags adalah penyusun
dan penanda sebuah element HTML.
Untuk sebuah element, diperlukan dua buah tags, yaitu tags untuk
awalan atau pembuka yang ditulis dengan simbol < dan tags penutup
element yang ditulis dengan simbol >. Sedang untuk akhir sebuah blok
element diakhiri dengan tanda / di depan kode element tersebut.
3. Atribut dan Nilai, digunakan untuk mendefinisikan karakteristik
elemen.
Atribut ini digunakan untuk mendefinisikan karakteristik suatu
element. Contoh penggunaan atribut adalah untuk menentukan tinggi
sebuah gambar, ukuran dan jenis huruf yang digunakan, warna untuk
latar belakang halaman dan masih banyak lagi. Sedangkan nilai adalah
isi dari atribut itu sendiri.
Dalam HTML atribut ukuran dalam elemen font bisa diatur, misal
ukuran font adalah 11.
<font size=”11”> … </font>
4. Pengelompokan, tiap tags memiliki aturan dalam pengelompokan.
5. Pengelompokan atau nesting, dilakukan sehingga
tag pada susunan yang benar dan terkelompokan
sesuai pendefinisian elemen. Seperti pada perancangan tabel berikut
:
<table>
<tr>
<th>Bulan</th>
<th>Anggaran</th>
</tr>
<tr>
 <td>Januari</td>
<td>Rp 11.000.000</td>
</tr>
</table>

Struktur HTML
● Bagian informasi, berisi versi HTML dan jenis dokumen yang
digunakan.
● Bagian head, berisi element-element untuk head.
● Bagian body, inti dari isi halaman yang akan ditampilkan.
● Bagian komentar, bagian yang tidak akan ditampilkan pada browser.
Struktur HTML dikelompokan dalam dua elemen pembangun <head>
dan <body>.
Informasi Versi
● HTML 4.01 Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/HTML4/strict.DTD">
● HTML 4.01 Transitional DTD
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/HTML4/strict.DTD">
● HTML 4.01 Frameset DTD
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/HTML4/strict.DTD">
● HTML 5
<!DOCTYPE HTML>
Judul yang bisa disematkan dalam elemen
<title> pada saat membangun Html.
<html>

<head>

<title>
Judul
Saya</title>

</head>

<body>

...
Hasil dari pengkodean tersebut dapat kita lihat dengan menjalankan
browser.

Dengan body, kita mulai membangun konten yang akan menjadi tampilan
yang nantinya mampu berinteraksi dengan user.

Hasil dari pengkodean tersebut dapat kita lihat dengan menjalankan

browser.
<html>

<head>

<title>
Judul Saya</title>

</head>

<body>

<h1>Program saya</h1>

...

</body>

Komentar
Komentar biasanya digunakan untuk menandai suatu baris atau sebagian
kode html, yang berfungsi memberikan informasi singkat.
Keberadaan komentar ditandai dengan tags <!-- isi --
>, penulisannya bersifat tidak wajib.
Element Dasar HTML
• Membangun struktur sederhana sebuah WEB
• Mengerti tag-tag dasar HTML
• Mengenal penggunaan tag-tag HTML
Heading
Sebuah dokumen HTML biasanya memiliki judul/heading yang menjadi isi
dalam sebuah halaman. Tag heading biasa dituliskan dengan <hn> dimana
n merupakan bilangan 1 sampai 6.

Paragraf
Setelah membuat judul, diperlukan sebuah teks yang berisi konten yang
merupakan bagian inti yang menjabarkan suatu informasi. Penjabaran ini
dilakukan dengan mempersiapkan tag <p> .. </p> yang berupa paragraf.

Atribut Align
Atribut biasanya diinisiasikan di dalam tag, atribut align berfungsi
memberikan pengaturan/format pada tulisan apakah harus rata tengah,
kiri,kanan, atau menyesuaikan.
<p align=right>
<p align=left>
<p align=center>
<p align=justify>
Gunakan kode pada pembuat paragraf yang tadi, kemudian berikan
atribut align=center pada tag heading dan paragraf.
Hasilnya akan seperti ini:

Center
Sebuah tag khusus yang meletakan konten rata tengah. Fungsinya tidak
berbeda dengan atribut align=center, hanya pemanggilannya saja yang
berbeda.

Style dan Format Teks

● <em></em>, Digunakan untuk menjadikan teks menjadi emphasizing.
● <strong> </strong>, membuat teks menjadi tebal atau bold.
● <kbd> </kbd>,menampilkan teks sebagai sebuah monospaced font.
● , membuat teks menjadi superscript.
● , membuat teks menjadi subscript.
<address> </address>, memisah teks ke baris berikutnya.
● <del> </del>, menampilkan teks dalam bentuk teks deleted, teks
dengan garis coret pada badannya.
● <ins> </ins>, Digunakan untuk menampilkan teks berupa teks insert,
ditandai dengan garis bawah.
● <br/>, berpindah ke baris baru.
<hr/>, membuat sebuah garis horisontal.
Karakter Khusus
● &lt, mewakili karakter <, kata kuncinya less than.
● &gt, mewakili karakter >, kata kuncinya greater than.
● &amp, mewakili karakter &, kata kuncinya ampersand.
● &quote, mewakili karakter ", kata kuncinya quotation.
● &reg, mewakili karakter ®, kata kuncinya registered trademark.
&copy, mewakili karakter ©, kata kuncinya copyright.
Font
 Tag <FONT></FONT> digunakan untuk format huruf/font. Dengan tag ini
kita dapat mengatur besar kecilnya huruf, warna huruf dan jenis huruf
yang akan dicetak.

Menggunakan Warna
Seperti yang dicontohkan sebelumnya penggunaan warna dapat
dilakukan dengan menambahkan atribut color dan atribut bgcolor
dapat digunakan sebagai latar warna.

Daftar Item
Membangun sebuah daftar dalam sebuah website dapat digunakan tags
berikut :
● Ordered list, daftar yang berurut dengan tags berupa <ol>.
● Unordered list, daftar yang tidak berurut/tanpa memiliki urutan
dengan tags berupa <ul>.
● Definition list, daftar yang tidak memiliki simbol pada tiap anggotanya.
Pada kelompok tags tersebut, daftar diinsiasi dengan tags <li>.
Ordered List
Element yang diguanakan untuk mendefinisikan list item adalah <ol> ,
dengan nilai atribut type yang dapat digunakan berupa:
● “A” untuk huruf besar / kapital.
● “a” untuk huruf kecil.
● “I” untuk huruf besar romawi.
● “i” untuk huruf kecil romawi.
 ● “1” untuk bilangan yang merupakan simbol default.
Unordered List
Unordered list adalah daftar item yang tersusun tanpa urutan bilangan
maupun abjad. Penanda item yang digunakan adalah sebuah simbol yang
dapat berupa lingkaran, kotak atau bulatan hitam. Daftar item ini
biasanya diistilahkan dengan buletted list.
Persiapkan struktur dasar HTML kemudian isikan kode berikut dalam tags
body :

Lanjut kebaris berikutnya :

Baris -baris terakhir, kemudian lihat hasilnya melalui browser.

Hasilnya akan seperti ini :

Daftar Istilah
Yang tidak boleh terlupa dari suatu dokumen adalah adanya daftar istilah
(Definition Term), karena dengan daftar ini akan menjelaskan pada para pembaca
kata-kata kunci yang kita gunakan dalam dokumen yang kita buat.
Daftar istilah dimulai dengan tag <DL> dan diakhiri dengan
</DL>. Setiap kata yang akan kita berikan definisi diawali dengan tag <DT>,
sedangkan definisinya sendiri dimulai dengan tag <DD>.
Blockquote
Dalam menulis suatu karya ilmiah kita sering mengutip dari daftar rujukan atau
kata-kata seseorang. Untuk membedakan dengan hasil karya kita atau kata-kata
kita biasanya kutipan seperti ini ditulis agak menjorok ke dalam dan diberi jarak
baris kosong diantara tulisan kita dan kutipan tersebut. Format dokument HTML
menyediakan fasilitas untuk ini.
Preformated Text
Preformated teks kita pakai jika kita ingin mencetak kalimat seperti mesin ketik.
Browser tidak akan memformat semua yang ada di dalam tag preformated. Jadi
disini semua karakter dianggap penting termasuk spasi dengan jumlah banyak. Ini
berlawanan dengan perlakuan browser dalam kondisi biasa, dimana ia tidak akan
mempedulikan jumlah whitespace (spasi, tab) dan tetap akan dicetak sebagai satu
karakter spasi saja.
Gambar dan Multimedia
Tujuan
• Mengenal tag untuk menampilkan gambar dan multimedia.
• Mengerti penggunaan tag gambar dan multimedia
Gambar
Gambar merupakan media yang baik dalam memperindah suasana dan
memperjelas suatu informasi. Terdapat tiga format yang biasa dipakai dalam
sebuah web yaitu gif,jpeg, dan png.

Memasukkan gambar
Dengan tag <img> anda dapat mengambil ruang untuk memasukan gambar,
berikut atribut yang biasa digunakan :
● src, nama dan alamat sumber tempat gambar berada.
● height, untuk menentukan tinggi gambar pada browser.
● width, untuk mengatur lebar gambar pada browser.
● hspace, untuk mengatur lebar spasi horisontal.
● border, untuk mengatur ketebalan border gambar.
● alt, sebagai informasi alternatif untuk gambar.
Contoh
<HTML>

<head>

<title>gambar</title>

</head>

<body>
<img src="nf_computer.png" alt="tux" align="top">

gambar NF computer

</body>

</HTML>

Gambar sebagai latar

Dalam <body> dapat juga diletakan sebuah gambar sebagai latar dengan
menggunakan atribut background.
Sintak :
<body background="lokasi gambar">
Contoh <html>

<head>

<title>Belajar Image di dalam HTML</title>

</head>

<body background="nf- computer.png">

HTML dengan Background Image..

</body>

Alignment pada gambar

Penulisan gambar di dalam dokumen HTML bersama dengan teks, akan membuat
suatu teks ditampilkan sejajar pada bagian bawah dari gambar. Gambar dapat
diposisikan di sebelah kiri maupun kanan dari teks.
Contoh <html>

<head>

<title>Belajar Image di dalam HTML</title>

</head>

<body>

<img src="nf_computer.png"
align="right"></img> Ini
Memanipulasi ukuran gambar
Gambar memiliki ukuran dengan dimensi piksel (pixel), yaitu lebar x tinggi (width
x height). Pada saat gambar ditampilkan di atas browser, maka gambar tersebut
ditampilkan dalam ukuran sebenarnya. Kita dapat memanipulasi ukuran gambar
yang ditampilkan di atas browser dengan memberikan atribut width dan height di
dalam tag <img>

Contoh
Alternate text
Atribut alt dapat digunakan di dalam tag img untuk memberikan alternate text
dari suatu gambar. Alternate teks ini ditampilkan ketika browser tidak dapat
memuat gambar. <html>

<head>

<title>Belajar Image di dalam HTML</title>

</head> Alt text akan muncul bila

gambar tidak mampu dimuat.
<body>

<img src="mypenguin.jpg" alt="ini

gambar penguin"></img>

</body>

</html>

Multimedia
Selain gambar, ada beberapa file yang mampu kita cantumkan kedalam sebuah
WEB. File tersebut merupakan file multimedia yang bisa berbentuk suara atau
video. Berikut jenis file multimedia:

Memainkan Musik
Halaman web yang dibuka dapat diiringi alunan suara musik atau suara yang lain
dengan menambahkan element untuk memanggil file musik didalamnya. Element
yang digunakan adalah tag <bgsound> dengan atribut src yang berisi nama file
suara yang akan dimainkan. Contoh dari pemanggilan file suara dapat dilihat dari
kode berikut:
<bgsound src="musik.wav">
Memainkan music/ video
Element lain yang dapat digunakan untuk memanggil file suara tadi adalah
element <embed>. Element ini juga membutuhkan atributsrc
untuk menentukan file suara apa yang akan dimainkan

< embed src="musik.wav"></embed>

Penggunaan element ini akan memunculkan control panel aplikasi multimedia
yang terpasang pada sistem dan merupakan aplikasi default untuk memainkan
file multimedia.
Table
Tujuan
● Mengenal tag untuk menampilkan table.
● Mengerti penggunaan tag untuk membuat table.
● Mengerti penggunaan tag untuk membuat table laporan

Table merupakan komponen penting untuk memanipulasi tampilan grafik suatu

homepage. Selain fungsi standarnya untuk menampilkan data, dengan tabel juga
kita dapat mempermanis tampilan homepage

Element Table
Untuk membangun tabel dengan HTML, diperlukan element-element berikut:
● <table> </table>, digunakan untuk mendefinisikan tabel yang akan
dibentuk.
● <tr> </tr>, digunakan untuk membuat komponen baris tabel.
● <td> </td>, digunakan untuk komponen kolom-
kolom pada baris tabel.
Contoh

Atribut-atribut tag table

Dalam contoh sebelumnya sempat ditambahkan atribut border dalam tag
<table>, fungsi atribut tersebut adalah dalam sebuah sel apakah akan diberi
sebuah garis pembatas. Garis pembatas dapat diinisiasi dengan “true” atau 1
pada atribut border dan “false” atau 0 jika tidak ingin ditambahkan pembatas
pada sebuah sel.
Contoh

● Align, Mengatur bagaimana tabel ditempatkan.

● Background, Mengatur gambar latar tabel.
● Bgcolor, Mengatur warna latar tabel atau komponen tabel
● Border, Mengatur warna border yang digunakan.
● Height,Mengatur tinggi tabel.
● Width,Mengatur lebar tabel.
● Nowrap,Mengatur word wrap teks dalam cell.
● Cellpadding, Mengatur jarak teks terhadap cell.
● Cellspacing, Mengatur jarak spasi antar cell.
Menggabungkan kolom dan baris
Dengan menggunakan atribut colspan pada tag <td>, beberapa kolom dapat kita
gabungkan. Kemudian jika ingin mengabungkan sebuah baris, maka dapat
digunakan atribut rowspan pada tag <td>.
Contoh

Contoh
Judul table
Untuk menambahkan sebuah title tabel, element yang digunakan adalah
<caption></caption> . Contoh dari penambahan title untuk tabel adalah:
<table>
<caption>tabel 2 baris 3 kolom </caption>
<tr>
<td> baris 1 kolom 1 </td>
...
</table>
Menambahkan heading
Element yang digunakan untuk keperluan ini adalah element <th></th> .
Penulisan tag ini sama seperti penulisan tag <td> yaitu didalam blok tag <tr>.
Contoh

Table sebagai laporan

Pada table terdapat tag <THEAD> atau table header yang biasa digunakan untuk
judul suatu kolom berbentuk tabular, sedangkan isi datanya dalam tag
<TBODY> . Dengan menggunakan tag <THEAD> dan
<TBODY> maka jika halaman dokumen laporan cukup panjang dan jika dicetak
akan menghasilkan lebih dari satu halaman, maka pada halaman berikutnya
header laporan akan tetap ada.
Contoh : thead
Contoh : tbody

Contoh : tfoot

Hasil

C. CSS ( Cascading Style Sheet )

1. Mengenal konsep CSS.
Cascading Style Sheets atau yang lebih dikenal sebagai CSS, adalah salah
satu feature dalam HTML yang memungkinkan anda untuk mengatur
tampilan halaman web yang anda bangun. termasuk warna dan ukuran
font, lebar dan warna garis, dan jumlah ruang antar item di halaman. CSS
berfungsi dengan memungkinkan Anda menentukan aturan yang
menyatakan bagaimana konten elemen dalam dokumen Anda akan
muncul.
CSS memungkinkan Anda untuk mengaitkan aturan dengan elemen yang
muncul di halaman web. Aturan- aturan ini mengatur bagaimana konten
elemen-elemen tersebut harus dieksekusi. dua aturan tersebut Selector
dan Declaration.

Selector, selector dapat berupa satu atau beberapa tags element HTML
maupun nama class suatu element pada halaman web.

Declaration, bagian dari suatu rule yang berisi satu atau banyak
pengaturan yang akan dilakukan untuk sebuah rule tersebut.

Rule, bagian dari sebuah style yang didalamnya terdiri dari selector dan
declaration rule yang akan diterapkan pada element halaman web.

Style Sheet, merupakan gabungan dari semua itu, yaitu berisi dari rule-
rule yang ingin diterapkan pada suatu halaman web.

Rule, Secara umum, sebuah rule dalam suatu stylesheet dituliskan dengan
format sebagai berikut:

Selector { property: nilai }

Contoh dari penulisan sebuah rule adalah:

Body { background-color: rgb(255, 255, 0) }

2. Properti Dalam CSS

Properti-properti ini menggambarkan warna (color) dan latar belakang
(background) dari suatu elemen. Kita dapat menentukan warna latar
(background color) dan gambar latar belakang (background image). Posisi
dari gambar (image), bagaimana jika berulang-ulang, dan apakah tetap
atau relatif terhadap canvas juga dapat di tentukan.
Background Color, Properti background color digunakan untuk
menentukan background color (warna latar belakang dokumen).

Sintaks : background-color: <value>

Possible Values: <color> | transparent

Contoh :

BODY {background-color: white} H1 {background-color: #000080}

Background Image, Properti background-image digunakan untuk

memberikan background-body image dari suatu elemen.

Sintaks : background-image: <value>

Contoh :

BODY {background-image: url(http://www.myserver.com/foo.gif)}

Background Repeat, Properti background-repeat menetukan bagaimana

suatu background image yang telah didefinisikan ditampilkan berulang-
ulang, repeat-x value akan mengulang image secara horizontal sedangkan
repeat-y value akan mengulang image secara vertikal.

Sintaks : background-repeat: <value> Possible Values:

repeat | repeat-x | repeat-y | no-repeat

Background, Properti ini memiliki value yang mungkin seperti background-

color, background-image, background-repeat.

Sintaks : background: <value>

Possible Values: <background-color> ||

<background-image>

|| <background-repeat>

Text Direction, properti ini mendefinisikan direction dari text.

Sintaks : direction: <value> Possible Values: rtl | ltr

text-align, properti ini medefinsikan alignment text.

Sintaks : text-align: <value>

text-decoration, Properti ini memberikan dekorasi sebuah text.

Sintaks : text-decoration: <value> Possible Value: none | [ underline ||

overline || line-through

|| blink]

text-indent, properti ini mendefinisikan indentation

/tabulasi.

Sintaks : text-indent: <value> Possible Value: <length> |

<percentage>

font-family, properti yang digunakan untuk menentukan keluarga

penulisan seperti (Arial, Times new roman, Helvetica, dsb).

Sintaks : font-family: <value> Possible Value: [[<family-name> |

<generic-family>],] * [<family- name> | <generic-family>]

font-style, properti yang digunakan untuk menginisasi jenis/gaya

penulisan sebuah font.

Sintaks : font-style: <value> Possible Value: normal | italic | oblique

font-size, properti yang digunakan untuk menetukan ukuran sebuah font.

Sintaks : font-size: <value> Possible Value: <absolute-size> |

<relative-size> | <length>

|<percentage>
 Properti ini memungkinkan untuk menentukan gaya, lebar, dan warna
batas elemen. Dengan css border pilihan bentuk gaya lebih variatif
daripada hanya menggunakan atribut border yang ada pada HTML.

D. JavaScript
1. Mengenal JavaScript sebagai Scripting Language.
Nama asli JavaScript awalnya adalah "ECMAScript", yang dikembangkan
dan dimaintain oleh ECMA organisation. ECMA-262 adalah standar
pertama dari JavaScript, Standardisasinya berdasarkan JavaScript
(Netscape) dan JScript (Microsoft).
Berikut definisi-definisi yang menjelaskan tentang JavaScript:
● JavaScript didesain untuk membuat halaman web HTML menjadi
interaktif.
● JavaScript adalah adalah scripting language yang berjalan di sisi client
(browser).
● JavaScript biasa ditulis menyatu dengan Tag HTML.
● JavaScript juga adalah interpreted language (artinya skrip langsung
dieksekusi tanpa proses kompilasi)
● Setiap orang dapat menggunakan JavaScript tanpa membayar lisensi.

Mengerti kegunaan JavaScript.

● JavaScript dapat mudah digunakan oleh desainer HTML.
● JavaScript dapat meletakan teks yang dinamis ke dokumen HTML.
● JavaScript dapat membaca dan menulis pada elemen-elemen HTML.
● JavaScript dapat digunakan untuk validasi data.
● JavaScript dapat digunakan untuk mendeteksi pengguna browser.
● JavaScript dapat digunakan untuk membuat cookies.

3. Mengerti cara menempatkan kode JavaScript.

JavaScript mengelola seluruh element pada halaman web secara hirarki.
Setiap element tersebut dipandang sebagai objek yang dapat memiliki
methodes dan properties tertentu. Dengan JavaScript kita dapat
memanipulasi objek-objek tersebut, untuk itulah diperlukan pemahaman
mengenai hirarki dari objek- objek HTML.
Skrip program JavaScript ditulis dalam dokumen HTML anda dengan masukkan
tag khusus <SCRIPT> dan diakhiri dengan tag </SCRIPT> (case dalam tag HTML
sifatnya case- insensitive). Seluruh blok kode JavaScript yang anda tulis harus
berada dalam (diantara) tag-tag tersebut. penulisannya seperti berikut:
<SCRIPT LANGUAGE="JavaScript">
 .....blok kode......
</SCRIPT>.
Selain atribut Language ada pula atribut lainnya seperti SRC :
<SCRIPT LANGUAGE="JavaScript" SRC="url"></SCRIPT>
Atribut "SRC" sifatnya optional, atribut ini digunakan jika anda ingin
menyertakan program JavaScript anda yang terpisah/eksternal dari
dokumen HTML anda kedalam dokumen tersebut.
Program JavaScript dapat diletakan diantara tag
<HEAD>...</HEAD>, namun tidak harus dalam tag tersebut anda juga
dapat meletakan diantara tag <BODY>...</BODY>. Hanya saja akan lebih
baik dan tertib jika anda menaruh script anda diantara tag
<HEAD>...</HEAD>. Contoh:
<HEAD><TITLE>Belajar JavaScript</TITLE>
<SCRIPT>
</SCRIPT>
</HEAD>

BAB V
Pengenalan Web Hosting
A. Perkenalan Tentang Hosting
Hosting atau web hosting adalah tempat untuk menyimpan semua file dan data
website sehingga dapat diakses oleh banyak orang melalui internet. File dan
data website tersebut bisa berupa video, gambar, email, script, aplikasi, dan
database. Tanpa adanya hosting, tentu saja Anda tak bisa membuat
website. Itulah kenapa, Anda perlu menyewa hosting terlebih dulu untuk
membuat website. Ibaratnya hendak membangun rumah. Kalau Anda
ingin membangun rumah yang besar, luas tanahnya harus semakin besar,
bukan? Sama seperti website, kalau ingin membangun yang kapasitas dan
performanya tinggi, Anda butuh hosting yang sumber dayanya besar.
B. Jenis Hosting
1. Shared Hosting
Shared Hosting adalah jenis hosting yang servernya dipakai secara
bersama-sama oleh banyak user sekaligus
Ibaratnya, Anda menyewa kamar kos yang hanya memiliki satu kamar
mandi, dapur, listrik, dan air untuk dipakai bersama. Jadi, Anda harus
berbagi fasilitas tersebut dengan penghuni lain.