Menu

    Tag Archives:contoh layout dan kodingnya

    Home / Blog / Tag: contoh layout dan kodingnya
    Presentation dan Layout pada Website

    Presentation dan Layout pada Website

    Komponen dalam website dapat terdiri atas :

    • Images
    • Text
    • Color and background
    • Tables and layout
    • Frame
    • Multimedia
    • CSS

    Gambar menjadi pelengkap dan dapat juga sebagai content untuk informasi tambahan.

    Contoh images dalam website seperti GIF, JPEG, XBM (XBitmap), XPM (XPixelmap), PNG (Portable Network Graphic).

    Pixel merupakan elemn terkecil dari sebuah image. Terdapat gradasi warna terdiri atas RGB (Red Green Blue) masing-masing memiliki nilai 0-255.

    File gambar yang dapat melakukan transaparan utnuk sebuah web yakni GIF (Graphic Interchange Format), dan GIF juga dapat melakukan animasi sederhana dimana frame-frame gambar digabungkan sehingga membentuk gambar gerak.

    Warna hitam memiliki kode #000000 dan warna putih berkode #FFFFFF.

    Contoh Color Space atau dapat disebut juga sebagai bidang warna :

    • RGB (Red Green Blue)
    • CMYK, digunakan pada layar televise dan printing
    • HSB
    • YCBR

    Gambar dibagi lagi menjadi 2 yakni :

    • Non Dithered, dimana hasil gambar yang diciptakan halus
    • Dithered, gambar yang ihasilkan memiliki pola bintik-bintik warna semacam noise

    Alt text dalam pemrograman web dapat disebut juga sebagai alternate text, jadi jika gambar tidak dapat ditampilkan maka alternate text akan membantu untuk mendeskripsikan gambar yang seharusnya muncul atau dapat digunakan sebagai tool tips ketika gambar di hover oleh mouse atau dibayangi oleh mouse.

    Gambar dapat juga sebagai tombol. Jadi gambar diklik sehingga akan mereferensikan ke link halaman yang lain.

    Satu lagi kita dapat melakukan pemograman image map seperti halnya yang diterapkan pada facebook yang dapat melakukan tag-ing terhadap foto-foto untuk identifikasi foto siapakah ini. Dimana image map ini melakukan pemetaan sekaligus gambar sehingga kita dapat melakukan pemilihan link maupun posisi dengan koordinat.
     

    Gambar Contoh ImageMap, hanya dengan 1 gambar saja namun kita dapat membagi link dari gambar ini

    Berikut saya bagikan ilmu saya mengenai image mapping terhadap gambar menggunakan koordinat sebagai titik pemilihan, berikut adalah source codenya

    <html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title>Untitled Document</title>

    </head>

    <body>

    <DIV ALIGN=CENTER>

    <MAP NAME=”map1″>

    <AREA HREF=”contacts.html” ALT=”Contacts” TITLE=”Contacts” SHAPE=RECT COORDS=”28,22,122,119″>

    <AREA HREF=”products.html” ALT=”Products” TITLE=”Products” SHAPE=RECT COORDS=”147,36,242,130″>

    <AREA HREF=”new.html” ALT=”New!” TITLE=”New!” SHAPE=RECT COORDS=”76,148,184,232″>

    </MAP>

    <IMG SRC=”tes.gif” ALT=”Gambar Coba2″ BORDER=0 WIDTH=301 HEIGHT=301 USEMAP=”#map1“>

    <BR>

    </DIV>

    </body>

    </html>

    Selamat belajar pemrograman website, salam ericovamili ! 😀