· Halo teman-teman, saya ingin berbagi mengenai HTML nih. Postingan ini adalah lanjutan dari postingan saya sebelumnya. Dalam postingan ini, ada cara menggunakan frame, border, form, menghilangkan scrolling, tabel, dll. Anda dapat membacanya langsung, silakan. Semoga bermanfaat :D
Color
Merupakan
attribute yang bisa anda tambahkan pada beberapa element seperti body, font,
link, dll. Color dibagi menjadi 3 kategori warna primer yaitu red, green &
blue. Masing-masing color didefinisikan dalam 2 digit hexadecimal number.
Hexadesimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
· Pre
Tag
untuk menampilkan text sesuai dengan aslinya.
· Hyperlink
Link
Address
ú
Absolute
Address : merupakan full internet address (URL) yang meliputi protocol, network
location and path & nama file.
ú
Relative
Address : URL yang tidak menyebutkan protocol & network location-nya (hanya
path & nama file).
Anchor
Tag <a> untuk menentukan hyperlink
dalam document HTML, HREF property digunakan untuk menentukan tujuan dari
hyperlink tersebut.
Contoh :
<a
href=”URL”> Hypertext </a>
<a href “protocol”//hoat : Jomain :
port/path/file name”> Hypertext </a>
· Table
¨
Membuat
Table
Tag <table> digunakan untuk
membuat table dalam doc. HTML, bagian pokok dari table adalah cell yang
didefinisikan dengan tag <td>.
Berikutnya, jika ingin membuat beberapa
baris cell dalam table menggunakan tag <tr>.
¨
Menambahkan
Heading Cell
Menggunakan tag <th>
¨
Pemformatan
Table
Untuk memformat perataan text didalam
table anda bisa gunakan attribute align &b valign (vertical align).
Attribute Value
Align Center Justify Right Left
Valign Baseline Top Bottom Middle
©
Image
3
jenis yang sering digunakan :
-
GIF
(Graphical Interchange Format).
-
JPEG
(Joint Photographic Expert Image).
-
PNG
(Portable Network Grapgics).
<img
src=”URL”>
Attribute
|
Value
|
Description
|
Align
|
Center, Justify, Left, Right,
Baseline, Top, Bottom, Middle
|
Top, Bottom, Middle
digunakan untuk menentukan posisi image terhadap text. |
Left, right, center untuk
menentukan posisi image di doc. |
©
Form
Kegunaan
Form
1.
Memperoleh
data-data user baik nama, alamat & data lainnya.
2.
Memperoleh
informasi pembelian secara online.
3.
Memperoleh
feedback dari user mengenai website anda.
Kegunaan
Element
Tag <form> digunakan untuk membuat
form di HTML.
Attribute
|
Description
|
Accept
|
Mendefinisikan
MIME yang diizinkan
oleh server yang memuat script untuk memproses form. Sintax :
Accept
= “Internet Media Type”
|
Method
|
Menentukan
bagaimana data akan
dikirim ke server. Get data akan dikirim dengan menggunakan query string pada URL Post data akan dikirim ke server sebagai block data ke script. Sintax :
Method
= “Post/Get”
|
Action
|
Menentukan
lokasi dari script yang
akan memproses data dari form. Sintax :
Action
= “URL”
|
©
Frame
Dasar
Penggunaan Frame
Frame memungkinkan 1 halaman web / lebih
ditampilkan pada sebuah jendela browser. Untuk mempraktikan frame, buatlah
terlebih dahulu 2 berkas HTML bersama framekir.htm & framekan.htm.
~ File framekir.htm :
<html>
<head>
<title> Frame Kiri </title>
</head>
<body bgcolor=”white”>
<head>
<title> Frame Kiri </title>
</head>
<body bgcolor=”white”>
<h1> Frame disebelah kiri
</h1>
</body>
</html>
</html>
~File framekan.htm :
<html>
<head>
<title> Frame Kanan </title>
</head>
<body bgcolor=”white”> <h1> Frame di sebelah kanan </h1>
</body>
</html>
<head>
<title> Frame Kanan </title>
</head>
<body bgcolor=”white”> <h1> Frame di sebelah kanan </h1>
</body>
</html>
Halaman berbasis frame dibentuk dengan
menggunakan pasangan <frameset> & </frameset>, attribute cols
digunakan untuk menentukan lebar masing-masing frame.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”framekir.htm”>
<frame src=”framekan.htm”>
</frameset>
</html>
</html>
Mengantisipasi
Tidak Adanya Dukungan Frame
Ada kemungkinan bahwa web browser yang
digunakan pemakai tidak mendukung fitur frame. Untuk mengatur agar ada
pemberitahuan bahwa halaman web hanya bisa dilihat denga browser yang mendukung
frame digunakan pasangan tag <noframes> & </noframes>.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frameset cols=”30%,*”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
<noframes> Sayang sekali halaman
ini tak dapat dibuka karena browser anda tidak mendukung frame.
</noframe>
</frameset>
</html>
</html>
Menggunakan
Border
Attribute BORDER pada tag
<frameset> berguna untuk mengatur ketebalan garis pemisah antar frame.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
<frame scr=”framekan.htm”>
</frameset>
</html>
</html>
· Menghilangkan
Scrolling
<html>
<head>
<title>
Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frameset cols=”30%,*” border=”0”>
<frame
src=”framekir.htm” scrolling=”no”>
<frame
src=”framekan.htm”>
</frameset>
</html>
</html>
·
Frame
& Link
Untuk
mempraktekan penggabungan pemakaian frame yang melibatkan link ke frame yang
lain, buatlah 3 file HTML berikut!
1.
File
redflash.htm :
<html>
<head>
<title> </title>
<head>
<title> </title>
</head>
<body>
<h2> Redflash </h2>
<body>
<h2> Redflash </h2>
Mempunyai warna merah disekitar tulang
daun & bintik-bintik putih di daerah yang berwarna hijau.
</body>
</html>
</html>
2.
File
rosebud.htm :
<html>
<head>
<title> </title>
<head>
<title> </title>
</head>
<body>
<h2> Rosebud </h2>
<body>
<h2> Rosebud </h2>
Mempunyai warna dasar hijau dibagian
pinggir, disekitar tulang daun berwarna merah jembu & bagian tepi daun
berwarna putih.
</body>
</html>
</html>
3.
File
daftar.htm :
<html>
<head>
<title> </title>
</head>
<body>
<center>
<a href=”redflash.htm” target=”dinamis”>
</head>
<body>
<center>
<a href=”redflash.htm” target=”dinamis”>
<h2> Redflash </h2>
</a>
<a href=”rosebud.htm”>
target=”dinamis”>
<h2> Rosebud </h2>
</a>
</center>
</body>
</html>
</body>
</html>
Pada file daftar.htm, attribute Target
digunakan untuk menentukan frame yang ditempati oleh halaman web yang
dipanggil.
Kode yang digunakan untuk menggabungkan
ke 3 file diatas adalah seperti berikut :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm”
name=”dinamis”>
</frameset>
</html>
</html>
§ Frame
Horizontal
HTML
juga memungkinkan pembuatan frame horizontal. Caranya dengan attribute cols
pada <frameset> menjadi rows. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame
src=”daftar.htm”>
<frame
src=”redflash.htm” pdname=”dinamis”> </frameset>
</html>
</html>
-
Penggunaan
Noresize
Attribute noresize pada tag
<frame> digunakan agar frame tidak bisa diubah ketika ditampilkan pada
browser.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame
src=”daftar.htm”>
<frame
src=”redflash.htm” noresize name=”dinamis”>
</frameset>
</html>
</html>
Gabungan
frame horizontal & vertical :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame
src=”judul.htm” scrolling=”no”>
<frameset
border=”0” cols=”30%,*”>
<frame
src=”daftar.htm” scrolling=”no”>
<frame
src=”redflash.htm” name=”dinimis”>
</frameset>
</frameset>
</html>
</frameset>
</html>
File judul.htm :
<html>
<head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
</body><head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
0 comments:
Post a Comment