2. Dapat mempercantik tampilan web dan Html lebih hidup.
3. Untuk menambah kesan interactive halaman web.
B. Dasar Teori
JavaScript
adalah Bahasa “scripting” bukan Bahasa pemograman yang ditempelkan pada kode
html dan diproses disisi klien. Dengan adanya Bahasa javascipt kemampuan
dokumen html menjadi semakin luas.
Javascript diletakkan di dokumen
HTML pada
Bagian
Head
Bagian Body,
dan
File
Eksternal
Perbedaan javascript
dan bahasa pemograman java
JavaScript memiliki ruang tersendiri untuk HTML dan CSS dalam
pengembangan web. Sementara pada java ada dimana-mana itu semua adalah
perbedaan antara java dan javascript . Java dan Javascript adalah bahasa yang berbeda, satu
adalah bahasa pemrograman tujuan
umum sedangkan yang satu adalah bahasa scripting
untuk HTML.
Variabel pada javascript bersifat case
sensitive.Cara
membuat variabel yang umum digunakan di javascript adalah menggunakan kata
kunci var lalu diikuti dengan nama variabel dan nilainya.
B. Percobaan
Analisa :
Kode <!--//--> umumnya disertakan dengan tujuan agar
sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya
sebagai komentar sehingga tidak ditampilkan pada jendela browser. Alert untuk
menampilakan interatve dalam bentuk dialog box yang ditampilkan oleh
javascript.
1. Penggunaan <PRE>
untuk menampilkan text apa adanya.
Coding :
Tanpa menggunakan tag <PRE>
Hasil :
Hasil Tanpa menggunakan tag <PRE>
Analisa : Yang menggunakan tag <PRE>
·Pada baris ke6 kita dapat melihat penggunaaan text
<h2> merupakan heading. Yang berfungsi sebagai judul.
·Pada baris ke 7 kita dapat melihat penggunaan text
<PRE> yang berfungsi untuk menampilkan text sesuai dengan format aslinya.
Tidak menggunakan <PRE>
·Lihat pada hasil tampilan html yang tidak menggunakan
tag<PRE>, tampilannya tidak terlihat seperti aslinya.
C.
Menampilkan daftar Item List.
1. Penggunaan tag <DL>, <DT>, <DD> untuk
menampilkan daftar khusus dengan tampilan menjorok ke kanan.
Coding :
Hasil
Analisa :
·Pada baris ke 6 menggunakan tag <b></b> itu
berfungsi untuk bolt huruf.
·Pada baris ke 7 sampai 12 menggunakan tag <dl>
menunjukkan sebuah description list(daftar penjelasan) digunakan bersamaan
<dt>sebagai penunjuk istilah dan <dd> sebagai penjelasan dari
istilah tersebut. Ini akan memberikan efek pada daftar khusus <dd>
menjorok kekanan.
D.Menampilkan
Gambar.
1.Penggunaan <body background>untuk menampilkan
background dan <img src> untuk menampilkan gambar.
Coding :
Hasil :
Analisa :
·Pada baris ke 5
<body
background="Photo1.jpg"> merupakan untuk menampilkan
background di laman web berbeda dengan menampilkan image. Ditampilan background
menampilkan image link dalam web page tersebut namun tampilan gambarnya sejauh mana
ada paragraph di tersebut .
·Pada baris ke 8
<IMG SRC= "Photo1.jpg"ALIGN="MIDDLE">
merupakan penampilan gambar berformat JPG dengan perataan gambar bersifat
middle.
2.Pengaturan ukuran gambar dengan atribut
Height dan weight, serta penggunaan atribut Border untuk memberikan bingkai
gambar.
Coding :
Hasil :
Analisa :
·Pada baris ke 7
sampai 10 kita melakukan pengaturan ukuran gambar menggunakan atribut Widht dan
height dengan mengambil foto file Photo1.jpg yang telah kita edit di Photoshop
atau aplikasi yang biasa digunakan.
E. Penggunaan Tabel
2. pengunaan sel dengan tag
<rowspan> dan <colspan>
a.
coding :
Hasil
:
Analisa
:
·Pengunaan tag
<rowspan> adalah untuk membuat sel. Coba lihat pada baris ke 10
<rowspan digunakan pada <td
ROWSPAN="3">Jawa Tengah </td> maka terbentuklah menjadi
lebar dan bergabung beberapa kolom tergantu banyaknya yang dispan menjadi satu,
sehinga satu unit kolom atau row menjadi lebih lebar. Seperti pada Jawa tengah.
b. coding :
hasil:
Analisa :
·Pada baris ke
10 <th colspan="2">Area :
Jawa Tengah </th> merupakan penggunaan rowspan yang berfunsi untuk
menggabungkan beberapa kotak kesamping. Disini kita menggunakn colspan =2 maka
barisan pertama akan menjadi gabungan 2 kolom.
3.Pengaturan jarak dalam Tabel
Coding :
Hasil
:
Analisa
:
·Pada baris 6
dalam tag <table>disitu ada
pengaturan cellspacing dengan maksud untuk mengatur jarak bagian sel terhadap
tepi dalam bingkai table. Dan juga ada cellpading yang bertujuan untuk mengatur
jarak teks terhadap tepi kiri.
6.Kesimpulan
Dalam materi 2 html ini banyak terdapat
tag-tag yang lebih berfariasi. Dan membuat lebih mengerti html yang akan kita
gunakan. Pembuatan Html adalah awal dari dasar mempelajari untuk pembuatan web atau aplikasi berbasis html. email adalah salah satu contoh penggunaan bahasa pemograman HTML
4. Memahami tentang pengaturan text,daftar item, gambar,
table, form, meta.
B. Dasar Teori
A. World
Wide Web
Internet Merupakan jaringan global yang
menghubungkan suatu network dengan network lainnya diseluruh dunia.TCP/IP
menjadi protocol penghubung antara jaringan-jaringan yang beragam diseluruh
dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian
dari internet yang paling cepat berkembang dan popular. WWW berkerja
mendasarkan pada tiga mekanisme :
1.Protocol standar
aturan yang digunakan untuk berkumonikasi pada computer networking, Hypertext
Tranfer Protocol(HTTP) adalah protocol untuk WWW.
2.Address WWW
memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang
digunakan sebagai standard internet.
3.HTML digunakan
untuk membuat dokumen yang bisa di akses melalui web.
B. HTML
Hypertext Markup Language merupakan standard Bahasa yang digunakan untuk
menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :
1.Mengontrol
tampilan dari web page dan contentnya.
2.Mempublikasikan
document secara online sehingga bisa diakses dari seluruh dunia.
3.Membuat
online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara
online.
4.Menampilkan
object-object seperti image, audi, video dan juga java applet dalam document
HTML.
C. Browser
dan Editor
Browser merupakan software yang di instill di
mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman
web. Browser yang sering digunakan biasanya Internet Explorer, Netscape
Navigator dan masih banyak yang lainnya. Sedangkan Editor program yang digunakan untuk membuat document HTML, ada
banyak HTML editor yang bisa anda gunakan diantaranya : Ms FrontPage,
Dreamweaver, Notepad.
D. BASIC
TAG HTML
1. Stuctur HTML Document
Document HTML bisa dibagi menjadi tiga bagian utama :
HTML, Setiap document HTML harus diawali
dan ditutup dengan tag HTML.
<HTML></HTML>
HEAD, bagian header dari document HTML di
apit oleh tag <HEAD></HEAD> didalam bagian ini biasanya dimuat tag
TITLE yang menampilkan judul dari halaman pada titlenya browser.Header juga
membuat text META yang biasanya digunakan untuk menentukan informasi tertentu
mengenai document HTML, anda bisa menentukan athour name, keywords dan lainnya
pada text META
BODY, document body digunakan untuk
menampilkan text, image link dan semua ditampilkan pada web page.
2. Basic HTML Element
Block Level Element yang sering digunakan Heading (h1
sampai h6).
Elemen heading berfungsi
menentukan bahwa bagian tertentu konten kamu berupa heading atau subheading dari
konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul,
dokumen HTML juga begitu. HTML berisi 6 heading level, <h1>–<h6> meskipun kamu hanya menggunakan paling banyak 3–4:
Paragraf
Seperti dijelaskan sebelumnya,
elemen <p> berguna untuk
wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten
teks reguler:
<p>This is a single
paragraph</p>
List
Kebanyakan
konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan
list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah
terurut and tak-terurut:
1.List tak-terurut ialah list yang urutan itemnya tidak
penting, seperti daftar belanja. Ini dibungkus dalam elemen <ul>.
2.List terurut ialah list yang urutan itemnya penting, seperti
resep. Ini dibungkus dalam elemen <ol>.
Tiap item dalam list ditaruh di dalam
elemen <li> (item list).
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
Font
Elemen HTML Font <font> mendefinisikan
ukuran font, warna dan presentasi atas isinya. Seperti semua elemen HTML
lainnya, unsur ini mendukung atribut global.
Color/warna
Atribut ini mengatur warna teks.
Face/jenis Font
Atribut ini mengatur jenis font
yang diterapkan dalam teks.
Size/ukuran
Atribut ini mengatur ukuran font.
Color
Color merupakan attribute
yang bisa anda tambahkan pada beberapa element body, font, link dan lainnya.
Color dibagi dalam 3 kategori warna primer yaitu red, green , dan blue.
Masing-masing color didefinisikan dalam 2 digit bilangan hexa decimal.
Format text
Preformat
text
Tag PRE
digunakan untuk menampilakan text sesuai dengan format aslinya.
Hyperlink
Link addres
Absolute Addres – merupakan full internet Addres (URL) yang
meliputi protocol, network location dan path dan nama file.
RelatifAddres – URL yang
tidak menyebutkan protocol dan network locationnya(hanya path dan nama
filenya).
Anchor
Anchor tag<a> untuk menentukan hyperlink dalam documents
HTML. HREF property digunakan untuk menentukan tujuan hyperlink tersebut
<a href = "halx.htm">Halaman X</a>
E. Table
Membuat table
Tag <TABLE> digunakan untuk membuat table dalam document
HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan
tag <TD>.
Berikutnyakalo ingin
membuat beberapa baris cell dalam table gunakan tag<TR>.
<tr >
<td >cell 1a</td>
<td>cell 1b</td>
</tr>
Menanmbahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag<TH>pada
table yang sudah dibuat.
Permormatan Table
Untuk memformat peralatan text didalam table anda bisa gunakan
attribute Align yaitu center, justy, left, right dan Valign(vertical
Alignmenta) yaitu baseline, top, buttom, dan middle.
<align =”center” valign=”besseline”>
Marge cell
Tag <td>memiliki atribut colspan untuk marge column dan
rowspan untuk marge baris.
F. Image
<IMG SRC= "Photo1.jpg"ALIGN="MIDDLE">
Seperti dikatakan sebelumnya, dia
mengembed image ke dalam halaman sesuai posisinya via artibut src, yang berisi path ke
file image kita.
Kita juga telah memasukkan artibut alt (alternative).
Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa
melihat image, yang mungkin karena:
1.User tunanetra. Mereka
sering menggunakan tools pembaca screen untuk membaca semua semua alt text.
2.Sesuatu
terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti
path di dalam atribut src menjadi salah. Kalau kamu simpan dan
reload halaman, kamu akan melihat sesuatu seperti ini:
Kata
kunci ini mengandung semua "teks deskriptif". Teks alternatif yang
kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image
tersebut.
G. Form
Kegunaan Form
1.Memperoleh data-data user baik nama, alamat dan data
lainnya.
2.Memperoleh informasi pembelian secara online.
3.Memperoleh feedback dari user mengenai website.
Berikut perintah dasar form:
<form>
Input Elemen
</form>
Ada dua atribut yang digunakan di elemen
yaitu method dan action. Method yang berfungsi sebagai pengiriman data pada
server dengan cara ke tujuan yaitu :
- Get: mengirim data pada server dengan
cara meletakan data pada bagian akhir URL yang ditunjuk.
- Post : mengirim datanya secara terpisah.
Perbedaannya, jika kita mengisi atribut
method dengan get (dimana ini adalah nilai default seandainya kita tidak
menuliskannya) maka isian form akan terlihat pada url browser. Method get ini
biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk
data yang lebih sensitif seperti yang berisi password, atau registrasi user.
Data hasil form tidak akan terlihat pada browser.Action yang berfungsi
menentukan lokasi dari script yang akan memproses data dari form. Struktur
dasar form akan terlihat sebagai berikut:
<form action="logindata.php"
method="post">
...isi form...
</form>
Elemen-elemen Input pada Form
Elemen yang paling penting dalam form
adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui
halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak
elemen-elemen input pada form, yang dapat digunakan oleh pengguna untuk
mengisikan data dengan yang berbeda-beda jenisnya. Berikut ini saya akan
membahas tiap-tiap elemen inputform,
beserta dengan cara pembuatannya.
1.Text Field
Elemen yang digunakan untuk memasukan text
dalam satu baris. Lebar karakter defaultnya adalah 20 karakter. Penulisan :<
input type=”text” />
2.Password
Field
Untuk memasukan datu baris teks dengan
format chiphertext/password. Dengan karakter yang disamarkan dengan bulatan
atau tanda “*”. Penulisan :< input type=”password” />
3.Radio
Button
Radio button digunakan agar dapat memilih
salah satu pilihan. Contoh jenis kelamin (male or female). Penulisannya : Radio Button<input
type="radio">
4.Text Area
Digunakan sebagai input kontrol form untuk
memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name,
cols, dan rows.
Nama= nama dari veriabel yang
dikirim ke suatu aplikasi
Rows= panjang baris dalam
karakter
Cols= tinggi kotak
Penulisannya : <text area Name=”name”
Cols=”number” Row=”number”....></text area>
Check Box digunakan untuk dapat memilih
lebih dari satu pilihan.
Penulisannya: Check Box<input
type="checkbox">
6.Select
List
Digunakan untuk menampilkan daftar pilihan
dalam bentuk drop-down list.
Penulisannya :
<select>
</select>
7.Submit
Button
Digunakan untuk mengirimkan data dari
halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk
mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dalamatribut ACTION dlam elemen FORM.
Penulisannya : Submit<input
type="submit">
8.Reset
Button
Digunakan untuk membatalkan semua proses
ata mereset proses pengisian data yang dilakukan di elemen input form. Penulisannya
: Reset<input type="reset">
