Dokument
Hypertext adalah dokumen yang berisi link ke dokumen lain. Anda bisa pindah
dari satu dokumen ke dokumen lain hanya dengan klik link tersebut.
Dokumen
hypermedia adalah dokumen yang berdasarkan hypertext ditambah dengan multimedia
seperti gambar, video dan audio. Dalam dokumen hypermedia, gambar sering
digunakan sebagai link ke dokumen lain
ABSOLUTE
PATH DAN RELATIVE PATH
Dalam HTML ada
dua jenis path, yaitu path absolute da path relative.
Path relative
jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif, yaitu
terletak di atas atau dibawah direktori dokumen tersebut.
Contoh : <a
href=“../tes.html”>masuk !</a>,
<a href=“masuk/tes.html”>Mlebu !</a>.
Absolute Path
adalah path yang merujuk pada pada suatu lokasi file dengan cara alamat url
yang ditulis lengkap atau utuh.
Contoh : <a
href=http://www.stikom.edu>Stikom</a>
Link
Link (disebut juga hyperlink atau web link) merupakan dasar pembangun
hypertext. Sebuah link menghubungkan satu sumber web ke web lain. Meskipun
merupakan konsep sederhana, link telah menjadi satu sumber sukses web.
Link mempunyai dua komponen, yaitu anchor dan tujuan. Link dimulai dari
anchor sumber dan berakhir di anchor tujuan yang merupakan sumber web.
•
link
merupakan sarana yang membawa anda ke lokasi yang dituju.
•
Anchor
merupakan lokasi yang menjadi tujuan dari link tersebut.
ATRIBUT ID
Atribut href
untuk menyatakan suatu file tujuan. Server mencari ke dalam direktori di mana
dokumen saat ini berada untuk mencari file tersebut. File dokumen tujuan HTML
yang menggunakan elemen A bisa diikuti atribut id.
Untuk membuat
link yang membawa pembaca ke suatu bagian tertentu dalam dokumen, cukup
sertakan tanda # setelah nama bagian link.
Contoh : <a
href=“#teguh”>Oke</a>
JUDUL LINK
Atribut title
bisa digunakan dalam elemen A dan LINK untuk menambah informasi tentang link.
Informasi ini akan ditampilkan berupa tooltip oleh browser.
Contoh : <a
href=“wkwk.html” title=“Beres”>Hahaha</a>
ELEMEN <A>
Untuk membuat
suatau link dalam HTML dipergunakan elemen yang dinyatakan dengan tag
berpasangan <a>..</a>.
Atribut
|
Fungsi
|
Name
|
Menyatakan titik anchor
dalam suatu dokumen HTML
|
Href
|
Menunjukan lokasi dokumen
Web
|
Rel
|
Menggambarkan hubungan dari
dokumen asal dengan dokumen tujuan yang ditunjuk dengan atribut href
|
DLL
|
Dokumen yang Tidak Ditemukan Browser
Jika suatu
dokumen yang link tidak ditemukan oleh browser, ada beberapa keterangan :
•
Jika
Browser tidak menemukan lokasi yang ada di link, browser akan memberi
keterangan
•
Jika
browser tidak bisa mendefinisikan tipe dokument yang di link, browser akan
terus mencobanya dan akan memberi peringatan.
HTML Frames
Kegunaan Frame :
•
Membuat
daftar isi pada suatu sisi frame sementara sisi frame yang lain menampilkan
isi.
•
Membuat
suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan
sisi frame yang lain menampilkan isi dokumen.
•
Membuat
suatu dokumen tanya-jawab, di mana sisi frame yang satu berisi daftar
pertanyaan sedangkan sisi frame yang lain
•
DLL.
Membuat Frame
Dokumen frame
tidak boleh berada dalam elemen body. Dokumen frame menggunakan elemen FRAMESET
mempunyai dua buah atribut, yaitu ROWS dan COLS.
•
ROWS
Membagi Jendela Browser menjadi beberapa baris frame
•
COLS
membagi jendela browser menjadi beberapa kolom frame
Tag <frame>
Tag
<frame> mendefiniskan sebuah frame. Tag tersebut harus dalam elemen
FRAMESET, conoth :
<html>
<head>
<title>frame</title>
</head>
<frameset rows="5,5"
cols="5,5">
<frame src="http://www.google.com">
<frame
src="http://www.detik.com">
<frame
src="http://www.facebook.com">
<frame
src="http://www.yahoo.com">
</frameset>
</html>
Link ke Sumber (SRC)
Atribut yang
paling penting dari tag FRAME adalah SRC (Source). SRC menunjukkan bahwa frame
berisi URL, yang biasanya adalah file HTML.
<frame
src=http://www.stikom.edu>
File HTML yang
dipanggil oleh SRC diusahakan merupakan dokumen HTML yang lengkap. Artinya
harus mengandung elemen HTML, HEAD, BODY dan lainnya. Anda juga bisa memanggil
file image (*.jpg) / (*.gif) / (*.png)
Mengatur Jumlah Baris dan Kolom Frame
Untuk mengatur
baris dan kolom frame hampir sama. Aturan penggunaan atribut ROWS dan COLS pada
FRAMESET adalah Sebagai Berikut :
<frameset
rows="500px,500px" cols="500px,500px">
……………
……………
</frameset>
Nilai baris dan
nilai kolom adalah kumpulan nilai yang menyatakan banyaknya frame yang dibuat
serta ukuran masing-masing frame
UKURAN Frame
dengan Pixel
Menentukan
tinggi baris dan lebar kolom dalam nilai secara absolut adalah kurang baik,
karena tidak semua browser dijalankan pada monitor yang mempunyai resolusi
sama, sehingga hasilnya bisa berbeda-beda
Contoh :
<frameset rows="5px,5px" cols="5px,5px">
UKURAN Frame
dengan Persen
Cara ini lebih
baik dari pengaturan frame dengan pixel. Harus diingat bahwa jumlah nilai
pengaturan adalah 100%. Jika nilai yang diberikan melebihi 100% maka browser
akan menurunkan nilai nya sehingga berjumlah 100%. Demikian jika jumlahnya
kurang dari 100% browser akan mengatur sehingga jumlahnya 100%
Contoh :
<frameset rows="50%,50%">
UKURAN Frame dengan Nilai Relatif
Contoh :
<frameset rows=“4*,*,3*”>
tanda * menyatakan suatu bagian dari sisa ruang yang ada. Di dedepan tanda *
tidak ada angka, maka dianggap bahwa angka tersebut adalah 1
Untuk pengaturan
di atas, ukuran frame yang pertama adalah 4/7 tinggi jendela browser, frame
yang kedua 1/7 tinggi jendela browser, dan frame yang ketiga 3/7 tinggi jendela
browser. Angka pembagi 7 didapat dari total jumlah nilai di depan tanda *.
HTML Forms
Form adalah
salah satu penampilan interaktif yang paling populer pada World Wide Web(www).
Form
memungkinkan pengguna berinteraksi dengan teks, grapik atau yang dirampilkan
pada browser.
Sebuah form dibentuk dengan menggunakan pasangan tag <form>
</form>. Setiap elemen FORM harus mempunyai 2 buah atribut METHOD dan
ACTION.
ACTION adalah URL dari script yang dipanggil oleh form tersebut
Method adalah cara mengirimkan data yang dimasukan pembaca ke web server.
Form ini mempunyai dua metode yaitu GET dan POST.
Metode GET
Adalah mengirimkan data pada server dengan cara meletakkannya pada bagian akhir
URL.
Metode POST
Adalah mengirim seluruh data dari form yang terpisah dari URL
Metode GET
<form action
= “Proses.php” method = “GET”>
……………
……………
</form>
Metode POST
<form action
= “Proses.php” method = “POST”>
……………
……………
</form>
Tag
|
Description
|
<Form>
|
Defines an HTML form for
user input
|
<input>
|
Defines an input control
|
<textarea>
|
Defines a multi-line text
input control
|
<select>
|
Defines a select list
(drop-down list)
|
<option>
|
Defines an option in a
select list
|
<button>
|
Defines a push button
|
HTML Scripting
The
<script> tag is used to define a client-side script, such as a
JavaScript.
The script
element either contains scripting statements or it points to an external script
file through the src attribute.
Common uses for
JavaScript are image manipulation, form validation, and dynamic changes of
content.
<script
type="text/javascript">
document.write("Hello
World!")
</script>
The
<noscript> tag is used to provide an alternate content for users that
have disabled scripts in their browser or have a browser that doesn’t support
client-side scripting.
The noscript
element can contain all the elements that you can find inside the body element
of a normal HTML page.
The content
inside the noscript element will only be displayed if scripts are not
supported, or are disabled in the user’s browser:
<script
type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support
JavaScript!</noscript>
Tag
|
Description
|
<script>
|
Defines a client-side script
|
<noscript>
|
Defines an alternate content
for users that do not support client-side scripts
|