Jumat, 30 Mei 2014

HTML Dasar 2


Halo Guys, saya ingin berbagi mengenai HTML nih. Dalam postingan ini, ad 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.


         #RRGGBB
          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”>
<h1> Frame disebelah kiri </h1>
</body>
</html>

~File framekan.htm :
<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>
<frameset cols=”30%,*”>
<frame src=”framekir.htm”>
<frame src=”framekan.htm”>
</frameset>
</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>
<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>


   Menggunakan Border
Attribute BORDER pada tag <frameset> berguna untuk mengatur ketebalan garis pemisah antar frame. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
</frameset>
</html>


·                                              Menghilangkan Scrolling
           <html>
           <head>
           <title> Contoh penggunaan frame </title>
           </head>
           <frameset cols=”30%,*” border=”0”>
           <frame src=”framekir.htm” scrolling=”no”>
           <frame src=”framekan.htm”>
           </frameset>
           </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>
<body>
<h2> Redflash </h2>
Mempunyai warna merah disekitar tulang daun & bintik-bintik putih di daerah yang berwarna hijau.
</body>
</html>

2.     File rosebud.htm :
<html>
<head>
<title> </title>
</head>
<body>
<h2> Rosebud </h2>
Mempunyai warna dasar hijau dibagian pinggir, disekitar tulang daun berwarna merah jembu & bagian tepi daun berwarna putih.
</body>
</html>

3.     File daftar.htm :
<html>
<head>
<title> </title>
</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>

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%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” name=”dinamis”>
</frameset>
</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%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” pdname=”dinamis”> </frameset>
</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%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” noresize name=”dinamis”>
</frameset>
</html>
Gabungan frame horizontal & vertical :

<html>
<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>

File judul.htm :

<html>
<head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
</body>



0 komentar:

Posting Komentar