Panduan HTML Iframe Tag dan List Pada Web

Comon Tech - mempelajari sebuah HTML itulah sangat mudah apalagi di kalangan blogger. banyak hal yang harus kita pelajari juga apa lagi tentang List. jadi list adalah Untuk menampilkan daftar halaman baru. Jika dalam Web, HTML memiliki tag khusus untuk itu Jika daftar tersebut tidak di gunakan adalah terurut (tampil menggunakan bullet), maka tag yang di gunakan adalah <UL> yangg berarti unordered list. Namun jika daftar tersebut adalah daftar yang penting urutannya, maka tagyang di gunakan adalah <OL>ordered list.

 HTML Iframe Tag dan Lis

Contoh Bukalah Notepad+, kemudian tuliskan kode-kode berikut:

<html>
<title>List</title>
<head>
<body>
  <h1 align=”center”>Tugas Akhir Kelompok TA 201</h1>
<h1 align=”center”>Pengembangan SI Akademik ITB</h1>
<UL>
<LI>Pendahuluan
<OL>
<LI> Latar Belakang
<LI> Rumusan Masalah
<LI> Tujuan
<LI> Batasan Masalah
<OL>
<LI> Daftar Pustaka
<OL>
<LI> Definisi Sistem Informasi
<LI> SI Akademik ITB saat ini
<OL>
</UL>
</body>
</html>

Simpan kedalam file list.html kemudian buka menggunakan browser browser. Frame Fugsionalitas bukanlah satu-satunya faktor penting terhadap baik atau tidaknya sebuah web. Tampilan adalah faktor lain yang juga penting agar sebuah website dan nyaman di gunakan serta membuat pengunjungnya berkunjungan lagi lain kali. Oleh karena itu, website harus terdesain tampilannya dengan baik.

HTML Pada sebuah Website Frame

Di suatu HTML ada dua buah cara dasar untuk mendesain layout sebuah website yaitu frame dan tage div. Keduanya memiliki kelebihan dan kelemahan masing-masing. Frame mudah di gunakan tapi dari sisi tampilan kurang begitu indah. Tag div agak ribet penggunanya tapi tampilannya lebih rapi.

Frame di gunakan untuk membagi jendela browser menjadi beberapa bagian terpisah. Masing-masing bagian terdiri dari doumen HTML tersendiri. Ini adalah mekanisme paling sederhanan dalam me-layout sebuah halaman web. Namun di HTML 5, tag <frame> sudah tidak lagi di gunakan [8].

Untuk membuat sebuah bagian frame, tag yang di gunakan sebagai berikut :

  • Tag <FRAMESET>
  • Tag <FRAME>
  • Tag <NODRAME>

Di gunakan untuk menampilkan sebuah alternatif dokumen atau menampilkan pesan jika browser tidak mendukung penggunaan frame. Tag Frameset <FRAMESET> mempunyai beberapa atribut [22]: Atribut Keterangan ROWS Membuat frame secara horizontal sekaligus mendefnisikan lebar masing-masing COLS adalah sebagai Membuat frame secara vertikal sekaligus mendefinisikan lebar masing-masing. BORDERCOLOR Menentukan warna bingkai frame

Untuk mendefinisikan lebar frame pada atribut ROWS dan COLS ada tiga cara yang dapat di gunakan, yaitu dengan nilai tetap (fix), nilai persentase, dan nilai proposional. Contohnya saja kita ingin di buat empat buah frame, maka penggunaanya bisa sebagi berikut.

Dengan nilai tetap

  • <FRAMESET ROWS=”50,140,400,50”>

Dengan nilai persentase

  • <FRAMESET COLS=”20%,40%,20%,20%”>

Dengan nilai proposional

  • <FRAMESET ROWS=”*,2*,*,*”>

Dengan nilai tetap, setiap frame di definisikan dalam ukuran pixel, cara ini kurang di saranakan karena jika resolusi monitor user tidak sam adengan resolusi monitor pada saat perancangan frame, maka frame yang terbentuk tidak beraturan. Dengan nilai persentasse, lebar setiap frame di definisikan sebagai persentase dari lebar jendela browse sehingga resolusi monitor tidak akan berpengaruh.

Dengan nilai proposional, lebar setiap frame juga di definisikan sebagai persentase dari lebar jendela browser, hanya saja pembacaannya agak berbeda. Misalnnya nilai proposionalnnya adalah “*,2*,*”, jumlahnya bintang seluruhnya adalah 1+2+1=4, drame pertama akan memiliki lebar 1/5 dari jendela browser, frame kedua 2/5, dan frame ketiga serta keempat sama dengan frame pertama.

Tag  Frame Tag <FRAME> mempunyai atribut [22] Atribut Keterangan :

  1. SRC adalah Menentukan nama file HTML yang di gunakan sebagai isi frame. 
  2. MARGINHEIGHT afalah Menetukan btas kiri dan kanan antara dokumen dengan bingkai dalam pixel.
  3. SCROLLLING adalah Menentukan apakah frame dapat memiliki scroll barr. Nilainnya adalah YES,NO,AUTO.
  4. NORISIZE afalah Jika atribut ini di sebutkan, frame tidak dapat di ubah ukurannya
  5. NAMA afalah Medifenisikan nama dari objek frame, nama ini dapat di gunakan sebagai tujuan sebuah link.
  6. BORDER afalah Menentukan ukuran bingkai frame.

Contoh : 

1. Bukalah Notepad++, Kemudian tuliskan kode-kode berikut :


<html>
</head>
<title>Frame kanan</title>
<head>
<body bgcolor =”white”>
<h1>Frame di Sebelah Kanan</h1>
        <body>
</html>
Simpan depan nama: framekanan.html
</html>
<head>
<title>Frame Kiri</title>
<head>
<body bgcolor =”white”>
<h1> Frame Di Sebelah Kiri</h1>
</body>
</html>

Simpan dengan nama: Framekiri.html

<html>
<head>
<title>Contohnya Pengunaan Frame</title>
<head>
<frame src=”framekanan.html”>
        </frameset>
</html>

Simpan ke dalam frame.html, bukanlah frame.html di browser.

2. bukanlah Notepad++, kemudian tuliskan kode berikut:

<html>
<head>
<title>Menu</title>
</head>
<body bgcolor = ”white”>
<li><a href=#>Home</a></li>
<li><a href=#>Products</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Contact</a></li>
        </ul>
   <body>
<html>

Simpan kedalm menu.html. bukanlah menu.html di browser.

3. Bukalah Notepad++, kemudian tuliskan kode berikut:

</html>
<head>
<title?Menu2</title>
</head>
<body bgcolor = “white”>
<ul>
<li><a hrefa=#>Pendidikan</a></li>
<li><a hrefa=#>Kesehatan</a></li>
<li><a hrefa=#>Pariwisata</a></li>
<ul>
<body>
</html?

Simpan kedalam menu2.html. bukanlah menu2 html di browser.

4. Bukalah Notepad ++, kemudian tuliskan kode berikut

</html>
<head>
<title?Menu3</title>
</head>
<body bgcolor = “white”>
<ul>
<li><a hrefa=#>Kuliner</a></li>
<li><a hrefa=#>Factory Outlet</a></li>
<li><a hrefa=#>Hiburan</a></li>
<ul>
<body>
</html>

Simpan ke dalam menu3.html. bukalah menu3.html di browser.

5. Bukalah Notepad++, kemudian tuliskan kode berikut:

<html>
<head>
      </head>
              <body>
Kota bandung merupakan kota metroolitan terbesar di Jawa Barat sekaligus menjadi ibu kota provinsi tersebut.<br>
Kota ini terletak 200 km sebelah  barat daerah bandung, dan merupakan kota terbesar ketiga di indonesia setelah jakarta dan Surabaya.<br>
Sedangkan wilayah Bandung Raya merupakan metropolitan terbesar kedua di indonesia setelah jabotabek. <br>
Di kota yang bersejarah ini, berdiri sebuah perguruan tinggi teknik pertama di indonesia (technische Hoogeschool, sekarang ITB)<br>
Menjadi ajang pertempuran di masa kemerdekaan serta pernah menjadi tempat berlangsungnya Konferensi Asia-Afrika 1955, <br>
Suatu pertemuan yang menyuarakan semngat anti kolonialisme, bahkan perdana mentri india jawaharla Nehru dalam pidatonya mengatakan <br>
Bahwa Bandung adalah ibu kotannya Asia-Afrika. [4]
</body>
</html>

Simpan ke dlam homepage.html. bukanlah homepage.html di browser.

6. Bukanlah Notepad++, kemudian tuliskan kode berikut:

<html>
<head>
     </head>
            <body>
             <img src=”images/bandung_banner.jpg”>
       </body>
</html>

Simpan kedalam homepage2.html. bukanlah homepage2.html di browser. mudah bukan dalam pembuatan Html list dan inframe pada suatu Web. semoga info yang saya berikan bermanfaat. dan kerja keras itu pasti ada hasilnya, goodluck tetaplah semngat walupun itu harus jatuh, dan tetaplah berdoalah selalu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel