Layout Web Page (html)

1. Tabel

A.  Membuat Sebuah Tabel dan Judul Tabel

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan.

Sebuah  tabel  mempunyai  judul,  tempat  anda  menjelaskan  kolom/baris  yang dilibatkan, baris untuk informasi dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag. Berikut ini disajikan elemen-elemen yang sering digunakan dalam pembuatan tabel dalam HTML.

Tabel 4.1  Elemen-elemen dalam pembuatan tabel HTML

A.    Melakukan format Baris dan Kolom

Setiap tabel pasti akan terdiri dari atas baris-baris yang diwakili dengan sebuah tag

<tr> dan juga mempunyai kolom-kolom yang menggunakan sebuah tag <td>. Setiap baris dan kolom pada tabel memiliki atribut nya masing-masing.

Contoh :

1.  Pengggunaan formating baris dan kolom dalam skrip HTML.

      Simpan dengan nama formating baris dan kolom dalam        

      html.html

Gambar Skrip contoh untuk melakukan formating baris dan kolom dalam table 

B.     Pembahasan Tabel Lebih Lanjut

Pada pembahasan selanjutnya, kita akan belajar menyisipkan sebuah gambar kedalam  sebuah  susunan  tabel.  Tabel  di  dalam  sebuah  website  dapat  berisi hyperlink, gambar, gambar yang menunjuk ke sebuah hyperlink dan teks dengan huruf yang berwarna.

Contoh :

1.  Penggunaan table dalam HTML.

     Simpan dengan nama tabel dalam html.html

Gambar Skrip Penggunaan table dalam HTML

2.  Penyisipan   gambar   dan   text   dalam   Tabel.       

     Simpan    dengan   nama penyisipan gambar dan text         dalam tabel.html


Gambar Skrip contoh untuk penyisipan gambar dan text

2. Frame

Framing dalam HTML dapat kita pergunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana didalam setiap bagian halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangan bagian lain tetap sehingga dapat melakukan efisiensi terhadap bandwidth koneksi internet dan mempercepat proses download page secara keseluruhan.

Berikut adalah sintaks umum yang sering digunakan dalam membuat frame

Tabel 4.1 Atribut yang digunakan dalam frame

Atribut

Fungsi

Frameset cols

Membuat frame vertikal dengan

 

lebar kolom tertentu

Frameset rows

Membuat frame horisontal dengan

 

tinggi baris tertentu

Frame src

Memasukkan  dokumen  HTML  ke

 

dalam frame

Noframe

Memasukkan    body    text    untuk

 

browser  yang  tidak  menampilkan frame


            Sebelum membuat sebuah frame, kita buat beberapa dokumen web yang nanti akan ditampilkan ke dalam tiap frame. Misal kita akan membuat tiga halaman yang akan ditampilkan yang terdiri dari halaman header.html, pascasarjana.html, menuutama.html, home.html dan menu.html.  sebuah tips jika akan membuat sebuah website dengan sub subnya, akan lebih efektif lagi jika kita membuat sub- sub nya terlebih dahulu. Misal membuat header, menu-menu baru dibuat frame utama berisi sub-sub diatas.

a.  Header

                        Simpan dengan nama header.html


Gambar Skrip Penggunaan table dalam HTML

 

 b.  Menu Utama

Selanjutnya adalah kita membuat menu utama. Dimana menu utama ini adalah menu paling depan sebagai “menu penyambut” ketika user mengakses halaman website yang kita buat. Berikut ini adalah skrip yang dibuat. Simpan dengan nama menuutama.html


Gambar Skrip contoh untuk pembuatan menu utama

c.  Sub Menu Pasca Sarjana

    Pada langkah selanjutnya adalah membuat sub menu pascasarjana.html. Mari kita ketikkan skrip dibawah ini kedalam aplikasi editor.


Gambar Skrip contoh untuk pembuatan sub menu “pasca sarjan


d.  Menu Pilihan Margin Kiri

Langkah selanjutnya adalah membuat bagian dimana untuk memberikan akses kepada pengguna dengan menyajikan kumpulan link-link dari sub menu yang ada. Contoh skrinya adalah sebagai berikut. Simpan dengan nama menu.html

Gambar Skrip contoh untuk pembuatan sub menu pilihan



e.  Frame

Setelah kita telah selesai membuat sub menu dari website tersebut, selanjutnya kita akan membuat frame. Agar dapat memilah satu halaman website menjadi beberapa bagian yang berisi tiap halaman tersebut. Berikut ini adalah contoh skrip yang akan kita buat. Simpan dengan nama home.html


Gambar  Skrip contoh untuk pembuatan frame

Komentar

Posting Komentar

Postingan populer dari blog ini

Cascading Style Sheet (CSS)

Gambar
  1.       Pengertian Selector, Property dan Value pada CSS Gambar 5.1 Selector, Property dan Value pada CSS A.     Selector Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS. Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”. Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. B.      Property Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mem...
Baca selengkapnya

PENANGANAN EKSEPSI. JAVA

Gambar
1. PENANGANAN EKSEPSI TRY  ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PenangananError”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ array.Array” ( LALU KLIK FINISH SCRIPT : import java.util.Scanner; /**  *  * @author DIAN  */ public class PenangananError {     public static void main(String[] args) {         int a,b;         double c=0;           Scanner input = new Scanner(System.in);           System.out.print("Nilai A =");         a = input.nextInt();         System.out.print("Nilai B =");         b = input.nextInt();         ...
Baca selengkapnya

MENGHITUNG NILAI. JAVA

Gambar
ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PERTEMUAN 3”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ pertemuan.pkg3.PERTEMUAN3” ( LALU KLIK FINISH SCRIPT : package pertemuan.pkg3; import java.util.*; /**  *  * @author DIAN  */ public class PERTEMUAN3 {     /**      * @param args the command line arguments      */     public static void main(String[] args) {         // TODO code application logic here         Scanner input = new Scanner(System.in);                 String nama;         int nilai2;         double nilai1, nilai3;      ...
Baca selengkapnya