File HTML berupa file teks (plain text file),
bukanbinary file, sehinggadapatdibuatmenggunakan editor teksbiasa
Web
adalah jaringan laba laba yang besar.
Browser
adalah aplikasi yang digunakan untuk melakukan browsing pada internet.
HTML
kepanjangan dari Hyper text makup language.
Contoh
: <HTML><Head><Title><Body>
Tag
<HTML> adalah setiap dokumen HTML, dimulai dengan (HTML) , dan diakhiri
dengan</html> yang menyatakan suatu dokumen sebagai dokumen HTML.
Tag<Head>&Tag<Body>
adalah dokumen HTML terdiri dari 2 bagian yaitu Head(bagian kepala) dan
body(bagian tubuh) secara umum Head berisi informasi informasi umum mengenai
dokumen , sedangkan body biasanya merupakan isi dokumen sebenarnya.
Contoh
tag<headL dan <body> :
<HTML>
<Head>
..Text
Dokumen pertamaku di Tulis di area body
</head>
<body>
..Teks Dokumen pertamaku di tulis di area body
</body>
</HTML>
Tag
<Title> adalah tag yang menampilkan judul pada Document pada title bar
browser.
¢
Atribut
dasar tag<Body> diantaranya :
¢
Bgcolor
(warna background dokumen)
¢
Left
margin (ukuran kiri margin pada dokumen)
¢
Right
margin (ukuran kanan margin pada dokumen)
¢
Top
margin (ukuran atas margin)
¢
Bottom
margin (ukuran bawah margin)
¢
Link
, vlink , dan alink = warna link , aktif link , dan link yang dikunjungi pada
dokumen.
Contoh
penulisan BG color <Body bg color=“Red”><body left margin=“25” top
margin=“20” bottom margin=“30”>
<body
bg color=“#00ff00”>
<em><h1>title</h1>/em>
<strong<h1>title/judul</H1></STRONG>
<P>
tag untuk paragraf
Tag<p>digunakan
unruk menampilkan satu blog tag dalam bentuk paragraf. Diawalai<p>
diakhiri </p>
Tag<pre>merupakan
tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita atur sesuai
keinginan kita.
<Div>
tag untuk memformat alligement satu blok text.
<marquee>
untuk membuat tulisan bergerak.
¢
Tag<table>
berfungsi untuk mengidentifikasi sebuah tabel.
¢
Tag<TR>
untuk membuat garis.
¢
Tag<TH>
untuk membuat heading
¢
Tag<TD>
untuk membuat sell
¢
Cellpading
berguna untuk menentukan lebar spasi antara border dan sell.
¢
Cellspacing
berguna untuk menentukan lebar spasi antara sell.
¢
Frame
digunakan untuk membagi pada tampilan browser agar menampilkan bebetapa dokumen
HTML.
¢
Tag<frameset>
digunakan untuk mengidentifikasi suatu set yang
terdiri dari beberapa frame yang akan ditampilkan pada windows browser.
¢
Tag<frames>
adalah tag yang digunakan untuk membuat frames.
<html>
<title>
membuat frame </title>
<frameset
cols=“20%,*”>
<frame
src=“____”name=“noname”>
Frameset
rows=“30%<*”>
<frame
src=“____”name=“toptoc”>
<frame
src=“____”name=“ovter”>
</frameset>
</frameset>
</html>
KODDING MEMBUAT LINK
<HTML>
<TITLE>MEMBUAT
LINK </TITLE>
<BODY
<CENTER><H1>
SMKN4TNG </H1></CENTER>
<A
HREF=“PRE.HTML”> DOKUMEN LINK </A>
</BODY>
</HTML>
¢
Action
: menentukan nama file yang akan di eksekusi setelah kita mengirimkan
form<misalnya submit button file tersebut juga merupakan file yang bertugas
untuk memproses input yang sudah dimasukan pengunjung melalui form ini.
¢
Method
: atribut ini mmenentukan cara html untuk mengirimkan isi input dari
ppengunjung dan bisa berisi post.
¢
Max
length : menentukan batas jumlah karakter maximum yang bisa di input.
¢
Cascading
style sheet (css) adalah salah satu fasilitas yang d berikan untuk pemograman
HTML , sehingga pengaturan/desain tampilan web page jadi lebih baik.
¢
Ada 3
metode penulisan css atribut : 1.inline style sheet 2. embedded style sheet 3.linked style sheet.
HEADER N FOOTER
¢
Header
adalah bagian yang biasanya digunakan untuk mencantumkan nama dan organisasi
fasilitas pencarian.
¢
Navigator
adalah bagian yang mengandung menu untuk memilih suatu tindakan.
¢
Section
adalah bagian yang merupakan isi halaman web.
¢
Footer
adalah biasanya berisi informasi hak cipta.
<HTML>
<Title>membuat
tabel</title>
<head></head>
<tabel
border cellpading=“40” cellspacing=“4”>
<tr><td
colspan=“2”> a </td></tr>
<tr><td
rowspan=“2”>b</td><td>c</td></tr>
<caption
align=“bottom”><b> tabel 1 </b></caption>
</tabel>
</html>
¢
Atribut
visibility dibagi menjadi 2macam :
¢
Hidden
artinya tidak tampak
¢
Visible
artinya tampak.
¢
Atribut
display dibagi menjadi 2 yaitu :
¢
None=tidak
tampak
¢
“”=tampak
¢
Visibility
dan display sama sama digunakan untuk mengatur tampilan suatu tag html
¢
Visibility
hanya mengatur tampak atau tidak suatu tag html
¢
Display
tidak hanya mengatur atau tidak suatu tag html , tetapi juga mengatur ruang
yang ditempati tag html tersebut.
¢
Penggunaan
objek modell sangat lah mudah dengan catatan harus mengikuti hearaki yang ada ,
secara garis besar hieraki objek model pada internet explore.
¢
Objek
window adalah objek tertinggi yang didalamnya terdapat suatu objek dokumen.
¢
Contoh
penggunaan objek model pada script
<html>
<script
language=“java script”>
Function
ketekan()
{
Document.write”halo
kawan”
}
</script>
<body>
>from
name=“from 1”
<input
type=“button”name=“button1” value=“tekan” onclick=“ke tekan()”>
</from>
</body>
</html>
Penulisan
objek window dapat diabaikan seperti contoh diatas
Penggunaan
objek window
Pada
bagian ini akan dibahas beberapa objek window yang sering digunakan yaitu :
Properti
status , method alert() , method confirm()
Method
prompt () , method open() , method close()
KODDING VISIBILITY AND DISPLAY
<html>
<style>
div {font – size : 12 pt;}
</style>
<script
language=“jscript”>
function disp_on()
{
kata 12.style.display=“”
}
function
disp_off=“none”
{
kata 12.style.display=“none”
}
Function
vis_on()
{
kata 22.style.visibility=“visibel”
}
Function
vis_off()
{
Kata 22.style.visibility=“hidden”
}
</script>
<body>
<input
type=“button”onclick=“disp_on()”
value=“display on”>
<input
type=“button”onclick=“disp_off()”
value=“display off”><br>
<Div
id=“kata11”>Text percobaan display 1</div>
<Div
id=“kata12”>Text percobaan display 2</div>
<Div
id=“kata13”>Text percobaan display 3</div>
<hr>
<Div
id=“kata21”>Text percobaan display 1</div>
<Div
id=“kata22”>Text percobaan display 2</div>
<Div
id=“kata23”>Text percobaan display 3</div>
<input
type=“button”onclick=“vis_on()”
value=“visible on”>
<input
type=“button”onclick=“vis_off()”
value=“visible off”>
</Body>
</HTML>
Font
ukuran 1
ukuran 2
ukuran 3
ukuran 4
ukuran 5
ukuran 6
ukuran 7
Hasil:
Contoh:
Font Face
Arial
Tahoma
Courier New
Hasil:
2.5.2 Menggunakan Karakter Khusus
Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada
halaman html:
Entitas
Keterangan
Contoh
©
Copyright symbol
©
®
registered trademark symbol
®
trademark symbol
™
nonbreaking space
<
less-than symbol
<
>
greater-than symbol
>
&
ampersand
&
"
quotation mark
“
Contoh :
2 < 3, adalah benar
3 > 4, adalah salah
Hasil:
2 < 3, adalah benar
3 > 4, adalah salah
2.5.3. Mengatur Pemerataan Tulisan
Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:
a.
Tag ini akan menampilkan tulisan/gambar ditengah baris.
b.
Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.
c.
Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading
Contoh :
Tulisan ini berada ditengah baris
Tulisan ini rapat kiri
Yang ini juga ditengah baris
Yang ini rapat kanan
Hasil:
Tulisan ini berada ditengah baris
Tulisan ini rapat kiri
Yang ini juga ditengah baris
Yang ini rapat kanan
2.5.4. Membuat Garis Pemisah
Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan
.
memiliki atribut:
- NOSHADE
- SIZE
- WIDTH.
Contoh :
Horizontal Line
atas
bawah
Hasil:
2.5.5. Membuat Unordered List
Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.
a.
Digunakan untuk mengawali dan mengakhiri suatu Unordered List.
b.
Digunakan untuk membuat suatu heading untuk list tersebut.
c.
Digunakan untuk membuat masing-masing item list tersebut.
Contoh :
UL
- urutan 1
- urutan 2
- urutan 3
Hasil:
2.5.6. Membuat Ordered List
Untuk membuat suatu ordered list, tag diganti dengan dan
.
Contoh :
OL
- urutan 1
- urutan 2
- urutan 3
Hasil:
2.5.7. Table dan Pengaturannya
Tabel adalah cara yang baik untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada database.
1.
Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.
a. BORDER
Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.
b. CELLSPACING
Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.
c. CELLPADDING
Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header , table row
| , dan table data .
d. WIDTH
Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.
e. ALIGN
Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari halaman.
f. BGCOLOR
Sebagaimana pada tag , anda dapat menentukan warna latar belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh,
Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
3. | |
Elemen table header berfungsi sama seperti elemen table data , tetapi elemen table header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
BGCOLORLIGHT
4. | |
Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sah untuk elemen table data :
a. COLSPAN
Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel
b. ROWSPAN
Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.
c. NOWRAP
Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu baris.
5.
Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau cell tags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.
Berikut ini adalah atribut sah yang CAPTION tag.
a. ALIGN
Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedangan Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.
b. VALIGN
Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells. Atribut ini di set diantara tag yang akan dirapikan. Setting yang sah adalah TOP, MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh , | Top Aligned | menentukan suatu sel akan dirapikan dibagian atas row.
Contoh:
Tabel
Hasil:
2.5.8. Menyisipkan Gambar Dalam Halaman Web
Untuk menyisip suatu gambar dalam halaman Web adalah dengan menggunakan tag . Tag tersebut memiliki element sebagai berikut:
a. SRC=URL, suatu URL yang menunjuk pada sumber file gambar.
b. ALIGN, merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar. Banyak nilai yang mungkin dan tidak akan dibahas disini.
c. ALT=text, menentukan tulisan yang akan ditampilkan (biasanya ditempatkan diantara tanda petik) jika browser tidak dapat menampilkan gambar untuk alasan tertentu.
d. HEIGHT=h WIDTH=w, menentukan height dan width dari image yang memungkinkan Web browsermenentukan ukuran tempat yang tepat sebelum gambar benar-benar selesai diterima. Hal ini tentu saja akan membantu Web browser dalam melakukan render terhadap seluruh isi halaman sebelum gambar selesai diterima.
Contoh :
Gambar
Hasil:
2.5.9. Link ke Dokumen atau Situs yang Lain
Dokumen HTML adalah dokumen-dokumen hypertext. Hal ini berarti bahwa mereka dapat mengandung link ke dokumen lain.
Tag ( ) digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Tulisan dan HTML lainnya yang ada diantara link ditampilkan kepada user sebagai suatu hotlink, biasanya dengan warna yang berbeda warna tulisan browser normal atau diberi garis bawah.
a. HREF
HREF = "URL" menentukan URL dari resource yang akan ditampilkan setelah user melakukan klik padanya.
Contoh :
Mailto
Kirim email ke Fansyah
Hasil :
b. TITLE
Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkan title dari halaman tersebut.
c. URN
Menentukan suatu URN (Universal Resource Name) untuk dokumen target.
d. NAME
Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan, URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, mendefinisikan nama link Copyright dalam dokumen tersebut.
2.5.10. Form dan Pengaturannya
Diawali dan diakhir dengan tag , field-field yang berada diantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing input field. Walaupun dapat memiliki banyak form dalam satu halaman, tetapi tidak dapat melakukan form dalam form.
Atribut dari elemen form adalah sebagai berikut:
a. ACTION
URL yang menentukan resource yang akan dilakukan oleh action pada form data, dan memberi respon pada user.
b. METHOD
Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke URL; menggunakan POST, data dikirim melalui suatu transaksi post pada melalui HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk menggunakan metode POST.
2.5.11. Frame pada Netscape 2.x/Microsoft Internet Explorer 3.x
Dengan Netscape 2.0 keatas, browser mampu menampilkan frame yang menggandung kode HTML yang berbeda. Berikut ini akan dijelaskan fungsi masing-masing tag:
1.
Elemen FRAMESET adalah kontainer group elemen dari frame. Ada dua atribut yaitu ROWS dan COLS.
ROWS
Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan (*) pada tempat dari nilai.
COLS
Syntax dari atribut COLS adalah sama dengan atribut ROWS.
2.
Elemen FRAME menentukan properti dari setiap frame masing-masing dalam frameset. Karena tidak mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalah sebagai berikut:
NAME
Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlaku sebagai target dari URLs lain.
MARGINWIDTH
Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame dalam jumlah pixel.
MARGINHEIGHT
Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.
SCROLLING
Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTO menampilkan scrollbar jika besar
dokumen melebihi ukuran frame.
NORESIZE
Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame. Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.
3.
Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkan frame, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.
2.5.12. Elemen-Elemen dalam Suatu Form
1. INPUT
Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag :
a. CHECKED
Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).
b. MAXLENGTH
MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalam suatu textbox.
c. NAME
Menentukan nama dari form control. Hal ini digunakan untuk menentukan elemen data pada form ke resource yang memproses elemen ini.
d. SIZE
Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang menentukan lebar control dalam karakter, atau dalam width/height pair.
e. SRC
Ini menentukan image yang akan ditampilkan dengan kontrol.
f. TYPE
Ini akan menentukan jenis control yang akan digunakan.
Berikut ini daftar dari kontrol yang ada:
CHECKBOX
Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan kosong menyatakan FALSE.
HIDDEN
Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat digunakan untuk mengirim status informasi kembali ke program form-processing.
IMAGE
Klik pada akan menyebabkan form data dikirim seketika, dan nilainya lewatkan oleh image dalam x,y kordinat pixel.
PASSWORD
Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan dengan asteriks sebagai penggantinya.
RADIO
Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak
Contoh:
Input radio
Hasil:
RESET
Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai initial masing-masing.
Contoh:
Reset
Hasil:
SUBMIT
Klik pada tombol akan mengirim form data ke FORM ACTION URL.
TEXT
Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.
TEXTAREA
Kontrol ini digunakan untuk mengetikkan banyak baris.
2. SELECT
Tag SELECT menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-down selection list. Berikut ini adalah atribut untuk elemen SELECT:
a. MULTIPLE
Atribut multiple memungkinkan user memilih lebih dari satu item dari listbox. User menekan tombol CTRL dan clicks pada item-item berbeda untuk memilih lebih dari satu.
b. NAME
Ini menentukan nama dari SELECT elemen.
c. SIZE
Ini menentukan tinggi dari list control.
3. OPTION
Elemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox. Berikut ini atribut dari elemen OPTION :
a. SELECTED
Atribut ini menentukan nilai default dari text pada listbox.
b. VALUE
Ini mengembalikan nilai dari elemen yang terpilih.
|