Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan6 Tabel2

    Diunggah oleh

    Joan Samosir
    7 tayangan7 halaman

    Judul Asli

    Pertemuan6-Tabel2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan7 halaman

    Pertemuan6 Tabel2

    Diunggah oleh

    Joan Samosir

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    4.

    Tabel dalam Tabel


    Teknik tabel bersarang merupakan salah satu cara yang dianggap lebih sederhana untuk
    menghasilkan layout tabel yang kompleks. daripada menggunakan atribut rowspan dan colspan
    Hal ini dapat dilakukan dengan membuat tabel di dalam sebuah sel (di antara tag <TD> dan </TD>).

    Berikut ini contoh urutan pembuatan tabel bersarang.


    • Buatlah tabel HTML dengan 2 kolom dan 2 baris
    • Tentukan sel tempat tabel bersarang. Misalnya kita pilih kolom ke-2 baris ke-2.
    • Ganti teks dalam sel itu dengan tabel kedua.
    Berikut ini contoh script HTML untuk membuat tabel bersarang tersebut.
    = HTML>
    <HTML>
    EAD>

    <H3 Align="center”>ContohTabel Bersarang</H3>

    < BODY>
    <TABLE border=”l" cellpadding=”4” cellspacing="4”)>

    <TD>Baris ke-l Kolom ke-1</TD>


    ke-l Kolom

    <TD>Baris ke-2 Kolom ke-1</TD>

    <TABLE border="l">

    <TD>Baris ke-l Kolom ke-1</TD>


    <TD>Baris ke-l Kolom ke-2</TD>
    , e •tabd.html
    L ftle.//D•tsararo

    <TD>Baris ke-2 Kolom ke-1</TD> ContohTabelBersarang


    <TD>Baris ke-2 Kolom ke-2</TD> ke-l Bariske-lKobmke-2
    Bariskel Kolom
    Barb ke-l Kolom ke-lž BariS ke-l Kolom ke-2ž
    Báris ke—2Kolom ke-l
    Baris ke-2 Kom ke-i? Barís ke-2 Kolom ke-2i

    Gambar 3.10 Contohtampilan tabel bersarang atau tabel


    dalam tabel di layar browser.

    </HTML>

    Contoh tampilan dokumen HTML berisi tabel bersarang di atas ditunjukkan pada Gambar 3.10.
    Aktivitas 3.2
    Gunakan
    Buatlah tabel seperti gambar berikut ini dengan trik-trik yang telah kamu pelajari.
    kamu buat!
    atribut-atribut cellpadding, cellspacing, dan atribut lain dalam kode HTMLyang

    Pesanan Pakaian Online


    Deskripsi Kuantitas Harga Email Pelanggan

    Kaos 5 75000 merp109@gmail.com

    Kemeja 2 150000 darwis123@yahoo.co.id

    Celana 3 250000 musthofa@gmail.co.id

    Total Harga 425000 Status terkirim

    C Desain Halaman Web dengan Konsep Tabel

    Halaman web biasanya menampilkan informasi atau data bagi pengunjungnya. Banyak cara
    untuk menampilkan data mulai dari menggunakan grafik, daftar, hingga tabel. Pengorganisasian
    data yang baik dan benar pada sebuah tabel HTMLakan sangat membantu dalam mengembangkan
    aplikasi web, terutama jika halaman web yang dibangun harus bersifat dinamis.

    1. Anatomi HalamanWeb
    Secara garis besar anatomi atau susunan dari suatu halaman web terdiri atas
    containing block,
    logo, navigation, content, footer, dan white space.

    Containing block merupakan bagian darihalaman web yang


    membungkus semua komponen
    halaman web. Umumnya dibuatdengan tag<BODY>, <DIV> atau
    <TABLE>.
    Logo merupakan identitas perusahaan, organisasi, atau pemilik situs.

    Navigation atau navigasi merupakan menu dari situsyang memudahkan


    pengunjung untuk
    berpindah halaman atau mengakses suatu informasi tertentu.
    Content atau isimerupakan tempat di mana sebagian besar informasi
    disajikan.
    Footer merupakan bagian bawah halaman yang umumnya berisi
    informasi singkat pemilik
    situs, copyright, dan beberapa link yang dianggap perlu.
    Whitespace merupakan area kosong pembatas antar-komponen. Whitespace diperlukan agar
    pengunjung mempunyai ruang berhenti di antara bagian-bagiansitus yang lain. Whitespace
    dapat juga diisi dengan banner atau animasi.

    2. Layout HalamanWeb
    Dengan desain halaman web yang baik dan tepat, pengunjung akan merasa nyaman dengan
    tampilan tata letak atau layout halaman web tersebut dan dapat tetap fokus pada isi atau konten
    halaman web tersebut. Desain halaman web yang baik tidak mengganggu kejelasan bagian isi.
    Desain layout suatu halaman web meliputi aspek-aspek berikut.
    pembagian tempat pada halaman
    pengaturan jarak atau spasi (spacing)
    pengelompokan teks dan grafik
    penekanan pada suatu bagian tertentu
    Beberapamodel layout yang biasa digunakandalam desain halaman web adalah sebagai
    berikut.
    Top Index, untuk menampilkan link yang banyak ke situs lain, seperti situs mesin pencari
    atau search engine dan situs portal.

    Banner atau Iklan

    Daftar Isi atau Navigasi

    Body atau Content (isi)

    Informasi Tambahan

    Gambar 3.11 Bagan model layout Top Index.

    Bottom Index, biasa digunakan jika isi halaman web berhubungan dengan topik tunggal.
    Banner/ Judul

    Body atau Content (isi)

    DaftarIsi/Lain-Lain

    Gambar 3.12 Bagan model layout Bottom Index.

    Left Index, untuk layar berukuran lebar (resolusitinggi)agar mudah dalam penyediaan
    navigasi tanpa menimbulkan ketidaksesuaian penyajian pada halaman utama.
    Banner/Judu[

    Daftar Isi Body atau Content (isi)

    Lain-Lain

    Gambar 3.13 Bagan model layout Left Index.

    Layout Split, banyak dipakai karena menjaga keseimbangan halaman web.

    Banner/Judul
    Daftar Isi Daftar Isi
    Body atau Content (isi)

    Lain-Lain

    Gambar 3.14 Bagan modeltata letak Layout Split.

    Alternating Index, untuk halaman yang banyak menampilkan grafik, foto, dan produk yang
    disertai teks berupa keterangan, harga,jumlah, dan lain - lain.

    Teks/Daftar Isi Gambar

    Gambar Teks/Daftar Isi

    Lain-Lain

    Gambar 3.15 Bagan model layout Alternating


    Index.

    Aktivitas 3.3
    Buatlah model layout web berikut ini dengan menggunakan
    tabel HTML.Tambahkan
    atribut-atribut lain yangsudah kamu pelajari!

    Banner

    Gambar Gambar
    DaftarIsi Daftarisi Teks
    Teks Teks

    Footer
    Pengujian Tabet Halaman Web pada Web Server

    Pada Inatcri ini, kita akan menguji tampilan tabel HTMLdi layar browser pada sebuah server
    web atau wcb s,crvcr,Tag html dapat dibuat berdasarkan materi-materi yang telah dipelajari
    sebclutnnya.
    Cara pengujian tabcl pada halarnan web melalui web server dapat dipraktikkan dengan
    langkahAangl<ah bcrikut.
    l. Tulislah kodc I ITML untul< menghasilkan tabel sederhana seperti pada gambar berikut.
    Data Pelanggan
    RM Barokah Zaman Now
    i No Tanggal Pesan Nama Pesanan Jumlah Harga Satuan Total Bayar

    1 18/02/2018 Dahlia Nasi Lemak 2 10000 20000

    2 18/02/2018 AchmadArifin Nasi Kebuti 1 30000 30000

    3 18/02/2018 Alfarizi Nasi Kucing 10 5000 50000

    Gambar 3.16 Contohtampilantabel di layar browser.

    2. Simpanlah dengan nama latihan_tabel.html pada [older C:\xampp\htdocs\belajar_html


    yang sudah diinstal pada materi Bab 3.(folder belajar_html dibuat dulu).

    •fr l, This PC 'Local Disk (C:) xampp htdocs belajarhtml

    Name Date modified Type


    * Quick access
    latihan_tabel 2/20/20181232 PM HTML File
    > OneDrive
    v This PC
    > 3D ObJects

    > Desktop
    Documents
    > Downloads
    Music
    Pictures
    Videos
    Local Disk (C:)

    Gambar 3.17 Membuatfolder belajar_html di directory xampp dan menyimpandokumenlatihan_html.


    dengan memilih aplikasi XAMPP yang sudah terinstal di dalam PC/
    3. Bukalah web server
    memulai hingga muncul
    laptop. Pilih Start untuk memulai web server, dan klik Admin untuk
    halaman pembuka aplikasi web server XAMPP.

    XAMPP Control Panel v3.2.2


    ModuES
    Semco Module PID(s) Port(s) Actions
    4156
    Apache 80, 443 Stop
    7408
    Expbrec

    FUeZUa

    Mercury

    XAMPP Installation Directory.


    12 33 46 PM Checking for prerequisites
    123 PM [mainl All prerequisites found
    12 33 46 PM [main) Initializing Modules
    12 3346 PM [ma,nl Starting Check-Timer
    12 33 46 PM [main] Control Panel Ready
    12 33 50 PM [Apache] Attempting to start Apache app..
    12.3350 PM [Apache) Status change detected: running

    Gambar 3.18 Membukaaplikasi web server XAMPP.

    4. Pada URL ketik folder yang disimpan pada htdocs (yaitu belajar_html) dan klik file latihan_
    tabel.html untuk memunculkan tabel pada halaman web server.
    •a indexofAetajarhtml X

    C) o locahost/bela'at_htrnIJ

    Index of /belajar html


    Name Last modified Size Description
    Parent Directory
    latihan tabel.html 2018-02-20 12:32 845
    Apache/2.4.25 (Win32)OpenSSV1.O.2jPHP/7.1.2 Server at localhost Port 80

    Gambar 3.19 MemasukkanURL menujuberkas yang akan ditampilkan pada web server.

    5. Hasil tabel akan terlihat seperti gambar berikut ketika dijalankan pada web server.
    Pengetikan
    alamat file pada URL harus tepat dan sesuai penempatan pada drive.
    e Tabel o x

    Data Pelanggan
    RM Barokah Zaman Now
    No Tanggal Pesan Nama Pesanan Jumlah Harga Satuan Total Bayar

    1 18/02/2018 Dahlia Nasi Lemak 2 10000 20000

    2 18/02/2018 Achmad Arifin Nasi kebuli 1 30000 30000

    3 18/02/2018 Alfarizi Nasi Kucing 10 5000 50000

    Gambar 3.20 Tampilan file tabel HTMLdi layar browserpada webserver.

    Tampilkan dokumen-dokumen HTMLyang telah kamu buat sebelumnya (tabel, format


    warna, dll) melalui web server. Amati apakah tampilan yang ada sesuai harapanmu. Jika
    menemui kesulitan, diskusikan dengan teman atau konsultasikan dengan guru.

    Rangkuman

    l. HTMLjuga menyediakan tag <TABLE>untuk menampilkan data dalam bentuk tabel.


    2. Untuk membuat tabel HTML,kita membutuhkan setidaknya 3 tag, yaitu tag <TABLE>untuk
    memulai tabel, tag <TR>,singkatan dari Table Row,untuk membuat baris dari tabel, dan tag
    <TD>,singkatan dari Table Data, untuk menginput data ke tabel.
    3. Tag <TABLE>memiliki beberapa atribut, border untuk mengatur tebal garis, cellpadding
    untuk mengaturjarak antara teks dengan garis tepi kolom atau baris, cellspacinguntuk
    mengatur jarak antara garis tepi bagian dalam dan garis tepi bagian luar, serta bgcolor untuk
    mengatur warna latar. Nilai untuk atribut border,cellpadding,dan cellspacingadalah angka
    yang menunjukkan satuan piksel (pixel).Nilai untuk atribut bgcolor adalah warna yang dapat
    dinyatakan dalam bentuk nama, kode heksadesimal, atau kode RGB.
    4. Tabel halaman web dapat ditampilkan juga pada browser dengan menggunakan web server.

    Anda mungkin juga menyukai