Format Tampilan Gambar dengan Map

       Format gambar yang ditambahkan dalam dokumen HTML, diantaranya dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag <img> yang sering digunakan diantaranya src, align, width, height, alt dan penulisan skrip secara umum adalah sebagai berikut :

          Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.

           Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag <map> dan <area>.

Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari.

Gambar browser yan mendukung tag <map>

            Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.

Format penulisan gambar map

Penulisan skript secara umum adalah sebagai berikut :

Keterangan:

Nama map -> nama dari map yang nantinya akan dipanggil oleh <image usemap>

Area shape -> jenis shape yang digunakan untuk menggambarkan area dari gambar map. Adapun 

                         jenis shape map yang dapat digunakan adalah

Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini

Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag<area> menggunakan atribut shape

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Pada kode program untuk menampilkan gambar dengan map

Bila kode program diatas dijalankan maka pada browser akan muncul gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul gambar D yang merupakan gambar detail planet A.

Gambar tampilan gambar dengan map

Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang tidak berlaku pada HTML 5. Berikut adalah daftar atribut yang berhubungan dengan gambar map

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :

• Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG>
• Untuk membuat image map, harus menambahkan atribut USEMAP pada tag image. <IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">
• Untuk membuat image map digunakan tag <map> dan <area>.
• Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side
• Bagian dari tag <map> berisi sejumlah elemen <area>
• Format penulisan gambar map

                    <map name =”nama map”>

                    <area shape = ”type” coords=”value” href=”link”>

                    </map>

• Area shape merupakan jenis shape yang digunakan untuk menggambarkan area dari gambar map.
• Area shape yang digunakan pada map Default, Rect, Poly, Circle
• Atribut yang digunakan pada tag <area> diantaranya alt, coords, download, href, hreflang, media, nohref, rel, shape, target, type

Format Tampilan Video dan Animasi

1) Format tampilan file Video

          Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.

         Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp4.

Bila anda hendak menampilkan video pada halaman web sedangkan file video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan menggunakan program gratis atau melalui layanan situs web.

Contoh program yang dapat mengkonversi format video adalah :

• Miro Video Converter dapat diunduh secara gratis atau melalui layanan www.microvideoconverter.com .
• FormatFactory -> di unduh gratis di http://format-factory.en.softonic.com
• http://video.online-convert.com -> layanan konversi secara online

MIME untuk format Video

    MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.

2) Menyajikan file Video pada tampilan web

        File video seperti mp4 dapat dimainkan pada halaman web melalui tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Berikut adalah format lengkap untuk memainkan video ke dalam aplikasi web

Atribut Height dan Width dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video.

Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Gambar video pada tampilan web menggunakan browser chrome

Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox, video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak mendukung format file *.mp4.

Gambar video pada tampilan web menggunakan browser mozilla firefox

Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.

Poster

       Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif diletakan dalam folder yang sama dengan file html nya.

Gambar anak.gif gambar yang akan disisipkan sebagai poster

Berikut adalah potongan kode yang menggunakan atribut poster

Ketika kode program di atas dijalankan maka akan menghasilka tampilan web seperti berikut ini

Gambar Tampilan video menggunakan atribut poster=”anak.gif”

SRC

        Source atau src digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut .Dapat dilihat pada potongan kode berikut :

4.) Menyajikan animasi pada tampilan web

       File animasi juga dapat ditampilkan pada halaman web dengan cara di embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain sebagainya. Perintah yang digunakan adalah

<embed src="siboy.swf">

Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.

Bila kode program diatas dijalankan maka akan muncul file animasi “siboy.swf” pada halaman web.

Gambar animasi siboy.swf pada halaman web

Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat dilihat pada potongan kode berikut dimana file rose.gif merupakan gambar bergerak (animasi). jika kalian membutuhkan animasi klik disini

Saat kode program diatas dijalankan maka animasi akan muncul dihalama web seperti terlihat pada gambar berikut

Gambar animasi rose.gif pada halaman web

Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.

• cara standar untuk menanamkan file audio pada halaman web: elemen <video> </video>.
• File-file video yang didukung HTML5 adalah MP4,WebM dan OGG.
• Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” >
• Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay, controls, height, width, loop, muted,poster, preload, src.
• Animasi dapat ditampilkan dalam web dengan menuliskan <embed src="file.swf">
• File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web.

Format Tampilan Audio

1.) Format tampilan file audio

         Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.

         Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua tipe file audio tersebut didukung oleh browser.

• OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
• MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
• WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.

Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

     a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web yang kita buat, akan 

         ada  beberapa  orang  yang  tidak  bisa  memutar  hasil  embed  mp3 di  web yan telah kita buat 

         tersebut. Hal  tersebut  bisa  jadi  disebabkan browser  yang  digunakan  tidak support pada file 

         berekstensi mp3.

     b. MIME untuk format audio

         MIME  (Multipurpose  Internet  Mail  Extension) digunakan untuk mekanisme untuk mengirim

         berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser

         tidak   salah   menterjemahkan   konten   yg  diterima.  Tidak   hanya   pada   web,   email   juga 

         menggunakan MIME. Berikut adalah tipe mime untuk format audio.

2.) Menyajikan audio dalam tampilan web

      File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>. Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web.

      Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "house.mp3" dan "house.ogg".

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.

Gambar tampilan audio saat dalam web

Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :

Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play .

        Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.

Gambar tampilan audio saat dimainkan dalam web

3.) Plug-in audio

         Plug-in merupakan sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman HTML menggunakan tag <object> atau tag <embed>.

        Tag <embed>

Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non-HTML). Adapun potongan kode untuk memainkan file *.mp3 yang embed/tertanam di halaman web adalah

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya karena browser mozilla firefox tidak mendukung file audio *.mp3.

Gambar tampilan audio dengan tag <embed>

           Tag <object>

Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode program untuk menampilkan file audio

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan terdengar suara dari file "house.ogg"

Gambar tampilan audio dengan tag <obyek>

Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi sebagai berikut :

• cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
• File-file Audio yang didukung HTML5 adalah MP3,WAV dan OGG.
• Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” >
• Atribut Audio yang digunakan dalam penulisan html diantaranya controls, autoplay, loop, muted, preload dan src.
• File audio dapat juga dituliskan menggunakan tag <embed> dan tag<object>

Menyajikan Format Tampilan Gambar

Memasukkan Gambar ke dalam Halaman Web

       Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.

          Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik.

           Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.

Bentuk umum penggunaan tag <img> adalah :           

                    <img src=”namafile”>

Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.

Contoh: 

                    <img src= “../image/komputer.jpg”>

Atau 

                    <img src=http://www.abcde.com/image/kamera.jpg/>

Gambar Menyajikan Format Gambar

              Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network graphics.

Menggabung Gambar dan Teks

Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:

Secara vertikal:

• Teks bisa berada sejajar dengan bagian atas gambar
• Teks bisa berada sejajar dengan bagian tengah gambar
• Teks bisa berada sejajar dengan bagian bawah gambar

Secara horisontal:

• Gambar bisa berada di bagian kiri teks/paragraf
• Gambar bisa berada di bagian kanan teks/paragraf

          Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>.

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar Menggabungkan Gambar dan Teks arah vertikal

            Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar Menggabungkan Gambar dan Teks arah horisontal

Memperkecil dan Memperbesar Ukuran Gambar

         Gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan ukuran asli dari gambar tersebut. Untuk menentukan ukuran gambar, kita perlu mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar. Perhatikan contoh berikut ini. 

             <img src=”images/komputer.jpg”>

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli (misal 500X375 pixel).

Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut, misalnya 

             <img src=images/komputer.jpg” width=320” height=”230”>

Memberi keterangan pada gambar

      Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke atas gambar.

      Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE maupun ALT pada tag <img>. 

               <img src=”namafile” title=”keterangan”>

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :

Gambar Menyajikan format gambar dengan keterangan

Pada gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat mouse di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan gambar.

• Untuk menampilkan format gambar digunakan tag <img>, dengan atribut src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar gambar dan height=”” untuk tinggi gambar.
• Untuk membuat keterangan menggunakan atribut TITLE maupun ALT pada tag <img>.

Menyajikan Desain Halaman Web dengan Konsep Tabel

       Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel.

Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif.

Meskipun terlihat sederhana, desain tabel yang dilakukan sampai sejauh ini masih merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri tidak memiliki struktur, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.

            Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang merupakan isi data, dan mana yang merupakan nilai agregasi dari data. HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.

1) Anatomi halaman web

Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut

Gambar anatomi halaman web

• Containing Block. Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
• Logo. Identitas perusahaan, organisasi, pemilik situs.
• Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
• Content. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
• Footer. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
• Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.

2) Layout halaman web

     Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain halaman web yang baik dan tepat akan membuat pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content). Desain halaman web tidak mengganggu kejelasan bagian isi.

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content).

         Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu halaman web meliputi penyusunan:

                 - pembagian tempat pada halaman

                 - pengaturan jarak sepasi

                 - pengelompokan teks dan grafik

                 - serta penekanan pada suatu bagian tertentu

          Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah

- Top Index

      ->  digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine

 Gambar model layout top index

Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut merupakan tampilan dari www.google.com

Gambar contoh halaman web dengan layout top index

- Bottom Index

     -> Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal

Gambar model layout bottom index

Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada berikut merupakan tampilan halaman web education and training berikut ini

Gambar contoh halaman web dengan layout bottom index

- Left Index

    -> Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, 

         tanpa menimbulkan kekacauan penyajian pada halaman utama

Gambar model layout left index

Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web berikut ini

Gambar contoh halaman web dengan layout left index

- Layout Split

   -> Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web

Gambar model layout split

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme wordpress berikut ini

Gambar contoh halaman web dengan layout split

- Alternating Index

    -> digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai 

         dengan teks berupa keterangan, harga, jumlah, dan lain - lain.

Gambar model layout alternating index

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, seperti pada berikut merupakan tampilan halaman web yang diambil dari theme di http://www.csszengarden.com/050// berikut ini

Gambar contoh halaman web dengan layout alternating index

3) Desain halaman web dengan konsep tabel

   - Top Index

       Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen 

       table.

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar penerapan <table> pada layout top index

- Bottom Index

Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar penerapan <table> pada layout bottom index

- Left Index

    Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen 

    table.

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar penerapan <table> pada layout left index

- Layout Split

    Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar penerapan <table> pada layout split

- Alternating Index
Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar penerapan <table> pada layout alternating index

Pada kegiatan belajar desain Web dengan Konsep Tabel dapat disimpulkan menjadi beberapa point penting seperti berikut

• Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel.
• HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.
• Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space
• Desain layout suatu halaman web meliputi penyusunan:

                   - pembagian tempat pada halaman

                   - pengaturan jarak sepasi

                   - pengelompokan teks dan grafik

                   - serta penekanan pada suatu bagian tertentu

• Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah top index, bottom index, left index, layout split, alternating index

** Untuk selain HTML5 diwajibkan tidak menggunakan kode html ini "<!DOCTYPE HTML>" melainkan mengunakan kode ini "<html>" karena kode tersebut khusus HTML5 jika kode html tersebut digunakan maka, format HTML kalian buat akan bermasalah atau error

THANK'S FOR IS COMING MY BLOG   ^_^