Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi 2

    Diunggah oleh

    ahmad sidul
    2 tayangan21 halaman
    html

    Judul Asli

    materi 2 (1)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    html

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    2 tayangan21 halaman

    Materi 2

    Diunggah oleh

    ahmad sidul
    html

    Hak Cipta:

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

    HTML Lanjut & CSS

    By : ROHMAN PUJADI

    Objectives
    Setelah menyelesaikan bab ini,
    anda diharapkan dapat:

    Mengerti tag-tag tentang images di HTML


    Memahami tag-tag pembuatan Form dan Frame
    Mengerti tag-tag CSS dalam design web
    Membuat halaman web dinamis dengan CSS.

    IMAGE
    Format image :
    GIF (Graphical Interchange Format) (.GIF)
    JPEG (Joint Photographic Expert Image) (.JPG)
    PNG (Portable Network Graphics)
    Insert image ke dokumen :
    <IMG SRC URL>

    IMAGE Cont. 1
    Contoh :
    <html>
    <head>
    <title>Working with
    Image</title>
    </head>
    <body>
    <p>
    <img src="MIR.jpg"
    height="100" width="100"
    align="middle">Aligned at
    Middle </p>
    </body>
    </html>

    IMAGE MAP

    Image map yaitu suatu area pada image yang bisa kita
    beri hyperlink area ini biasanya disebut hot spots
    Coordinat hotspots ditentukan oleh bidang geometry :

    IMAGE MAP Cont. 1


    Contoh :
    <body>
    <img src="coba/mir.jpg"
    width="400" height="200"
    border="5" usemap="#satelit">
    <map name="satelit">
    <area shape="rect"
    coords="0,0,200,100"
    href="file1.htm"
    alt="kotak link">
    </map>
    </body>

    FORM
    Kegunaan Form :
    memperoleh data-data user baik nama,
    alamat dan data lainnya untuk mendaftar
    pada service yang di sediakan.
    memperoleh informasi pembelian secara
    online
    memperoleh feedback dari user mengenai
    website anda.

    Element Form
    Untuk membuat form

    : <form> </form>

    HTML Input Element - Button

    Atribut : type, value, onclick.

    <html> <head>
    <title>Contoh Button</title>
    <script language="JavaScript">
    function kirim_form ()
    {window.alert ("Form telah sukses dikirim");
    window.open ("http://www.microsoft.com");
    }
    </script> </head>
    <body>
    <form>
    Klik tombol dibawah ini.<br>
    <input type="button"
    value="Kirim Form"
    onclick="kirim_form()">
    </form>
    </body>
    </html>

    HTML Input Element - Text

    Untuk memasukkan data.


    Atribut : type, name, size, maxlength, value.

    <body>
    <form action="info.htm" method="post">
    Nama :
    <input type="text" name="nama" size="20">
    <br>
    Hobby :
    <input type="text" name="hobby" size="20">
    <br>
    <input type="submit" value="kirim">
    <input type="reset" value="kosongkan">
    </form>
    </body>

    HTML Input Element - CheckBox

    Atribut : Type, Name, Checked.

    <body>
    <form>
    Buah yang anda sukai : <br>
    <input type="checkbox" name="anggur" checked>
    Anggur <br>
    <input type="checkbox" name="jeruk">
    Jeruk <br>
    <input type="checkbox"
    name="melon">
    Melon <br>
    </form>
    </body>

    HTML Input Element - Radio

    Atribut : Type, name, value, checked.

    <body>
    <form>
    Jenis Kelamin : <br>
    <input type="radio" name="sex"
    value="p" checked>
    Pria <br>
    <input type="radio" name="sex
    value="w">
    Wanita <br>
    </form>
    </body>

    HTML Input Element - TextArea

    Atribut : cols, rows, name, size.

    <body>
    <form>
    Komentar anda : <br>
    <textarea name="komentar"
    rows="5" cols="40">
    </textarea>
    </form>
    </body>

    HTML Input Element - Combo

    Perintah : tag <select>

    <form>
    Musik yang paling anda sukai : <br>
    <select name="musik">
    <option value="Jazz"> Jazz
    <option value="Rock"> Rock
    <option value="Pop"> Pop
    <option value="Lain2"> Lain
    </select>
    </form>

    HTML Input Element List Box

    Hampir sama dengan combo, tambahan :


    size=jml_yg_ditampilkan

    <form>
    Musik yang paling anda sukai : <br>
    <select name="musik" size="2">
    <option value="Jazz" selected> Jazz
    <option value="Rock"> Rock
    <option value="Pop"> Pop
    <option value="Lain2"> Lain
    </select>
    </form>

    CASCADING STYLE SHEETS

    Feature untuk membuat dynamic HTML.


    Style sheet mendeskripsikan bagaimana
    tampilan document HTML di layar (template)
    Membuat special efek (mendefinisikan style
    untuk <H1> dengan style bold dan italic dan
    berwarna biru)
    Support ke semua browser.

    Aturan Penulisan CSS


    Nilai untuk property tidak boleh dalam

    tanda petik.
    contoh : color : green;
    Nama property bersifat case sensitive.
    color : green;
    property : color
    value
    : green

    Cara Penggunaan

    External Style Sheet


    Bentuk :

    <link rel=stylesheet type=text/css href=css_files.css>

    <link, merupakan tag pembuka diakhiri dengan tanda >

    rel=stylesheet, menerangkan halaman ini akan dikenai efek style sheet

    type=text/css, file yang dipanggil berupa css

    href=css_files.css, alamat dokumen stylesheet yang dipanggil

    Contoh External Style Sheet


    Contoh script efek.css
    body {
    color: green;
    background: white;
    font-family : arial;
    }

    <HTML>
    <HEAD>
    <TITLE>centranet</TITLE>
    <LINK REL="STYLESHEET"
    TYPE="text/css" HREF="efek.css">
    </HEAD>
    <BODY>
    <H1>PENS ITS</H1>
    <P> PENS ITS adalah kampus teknik yang
    concern ke bidang elektro
    </BODY>
    </HTML>

    Cara Penggunaan Cont.1

    Internal Style Sheet


    Bentuk umum :
    <style type=text/css>
    definisi style
    </style>

    <HTML>
    <HEAD>
    <TITLE>centranet</TITLE>
    <STYLE type="text/css">
    body {
    color: white;
    background: green;
    font-family : arial;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <H1>Zefnet</H1>
    <P>Zefnet adalah sebuah web
    Developer dan Linux Center
    </BODY>
    </HTML>

    Cara Penggunaan Cont.2

    Inline Style sheet

    <HTML>
    <HEAD>
    <TITLE>centranet</TITLE>
    </HEAD>
    <BODY style="color: white;
    background: green;
    font-family : arial; >
    <H1>ZEFNET</H1>
    <P>ZEFNET adalah sebuah web
    Developer dan Linux Center
    </BODY>
    </HTML>

    Anda mungkin juga menyukai