Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membangun Web

    Diunggah oleh

    Acenk Taofikhidayat
    11 tayangan18 halaman
    hatur nuhun

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    hatur nuhun

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan18 halaman

    Membangun Web

    Diunggah oleh

    Acenk Taofikhidayat
    hatur nuhun

    Hak Cipta:

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

    Membangun Web

    Apa Itu HTML ?


    Hyper Text Markup Language, yang memungkinkan sebuah dokumen ditampilkan pada sebuah
    browser web, berisi perintah-perintah (tag) yang mendefinisikan bagaimana isi dokumen tersebut
    ditampilkan (format dokumen). Dokumen HTML dapat disisipkan objek selain teks seperti
    gambar, suara, shockwave, applet dan video. Dokumen HTML memiliki ekstensi .htm atau .html

    Apa saja yang diperlukan untuk belajar HTML ?


    Untuk belajar HTML, anda tidak perlu menjadi seorang programmer. Anda cukup menguasai
    dasar bekerja dengan komputer. Dapat mengoperasikan browser web dan editor teks sederhana
    seperti Notepad.

    Berikut adalah contoh sebuah dokumen HTML.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <html>
    <head>
    <title>Halaman HTML ku yang pertama</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <p>Selamat Datang di halaman <strong>HTML</strong> ku yang pertama</p>
    <p>Bila dibuka di browser web, semua tag ini tidak akan
    <i>terlihat</i>.</p>
    <p>Halaman HTML terdiri dari tag yang dibuka dengan
    <strong>&lt;nama_tag&gt;</strong> dan diakhiri dengan
    <strong>&lt;/nama_tag&gt;</strong></p>
    </body>
    </html>

    Copyright©2005, Deni Setiawan


    Halaman 1
    Membangun Web

    Dan ketika dibuka di browser web akan tampil seperti ini.

    Bila anda perhatikan isi dari dokumen HTML diatas terdiri dari tag-tag, apakah anda harus
    menghapal semua tag tersebut ??? Tentu tidak, karena sekarang sudah banyak pengembang
    software untuk membuat dokumen HTML seperti halnya Macromedia Dreamweaver yang akan
    dibahas pada modul ini.

    Copyright©2005, Deni Setiawan


    Halaman 2
    Membangun Web

    Memulai Macromedia Dreamweaver


    Untuk mengaktifkan Macromedia Dreamweaver, klik Start  Programs  Macromedia 
    Macromedia Dreamweaver MX

    Mengenal Jendela Utama Macromedia


    Dreamweaver MX
    Ketika pertama kali dijalankan, program Macromedia Dreamweaver MX akan menampilkan
    pilihan tampilan jendela utama, yaitu Dreamweaver MX Workspace atau Dreamweaver 4
    Workspace ditujukan bagi anda yang mungkin sebelumnya pernah menggunakan Macromedia
    Dreamweaver versi 4. Dan pada pilihan Dreamweaver MX Workspace terdapat kotak pilihan
    HomeSite/Coder Style, bila ditandai maka tampilan jendela utama secara default ditujukan untuk
    anda yang senang dengan metode coding. Bagi pemula sebaiknya pilihan tersebut di kosongkan.

    Copyright©2005, Deni Setiawan


    Halaman 3
    Membangun Web

    Klik OK.
    Selanjutnya anda akan melihat tampilan jendela utama Dreamweaver MX.

    4
    1

    2
    6
    3

    Copyright©2005, Deni Setiawan


    Halaman 4
    Membangun Web
    Keterangan :
    1. Window Document, tempat melakukan editing dokumen HTML
    2. Panel Site, menampilkan informasi folder dan drive yang ada pada windows
    3. Property Inspector, digunakan untuk melakukan format dokumen atau mengubah properti
    dari suatu objek, misalnya gambar.
    4. Document Toolbar, digunakan untuk mengubah judul dari dokumen, menampilkan
    dokumen pada browser, berpindah tampilan dokumen (Code View, Design View dan
    Code and Design View).
    5. Insert Bar, digunakan untuk memasukkan komponen-komponen ke dalam dokumen,
    misalnya gambar, shockwave atau membuat tabel dll.
    6. Tag Inspector, menampilkan tag yang aktif pada saat pengeditan dokumen.

    Membuat Dokumen HTML Sederhana


    Berikut adalah langkah untuk membuat dokumen HTML pada Dreamweaver MX.

    1. Jalankan program Macromedia Dreamweaver MX.


    2. Ketikkan sebuah tulisan pada dokumen baru, seperti terlihat pada gambar berikut.

    Copyright©2005, Deni Setiawan


    Halaman 5
    Membangun Web

    3. Ubah judul dokumen menjadi “Selamat Datang”.

    4. Simpan dengan nama latihan_1.html


    5. Tampilkan pada browser dengan menekan tombol F12, atau klik ganda file latihan_1.html
    tersebut.
    6. Hasilnya terlihat seperti berikut.

    Copyright©2005, Deni Setiawan


    Halaman 6
    Membangun Web

    Mengenal Properti Dokumen 6


    5

    3 4
    1 2

    Keterangan :
    1. Format Style, terdapat beberapa pilihan yaitu, Heading 1hingga Heading 6 serta Paragraf
    2. Alamat Link, digunakan untuk menambahkan hyperlink pada teks atau gambar sehingga
    ketika pengguna melakukan klik pada teks atau gambar tersebut halaman aktif akan
    berpindah sesuai dengan isi dari properti link yang didefinisikan.
    3. Font, digunakan untuk mengubah jenis huruf.

    Copyright©2005, Deni Setiawan


    Halaman 7
    Membangun Web
    4. Size, digunakan untuk mengubah ukuran huruf.
    5. Text Color, digunakan untuk mengubah warna pada teks.
    6. Alignment, Bold, Italic, Bullet and Numbering, Text Indent dan Text Outdent.

    Blok terlebih dahulu teks yang akan diformat lalu kemudian pilih propertinya.

    Cobalah untuk mengubah beberapa properti pada file latihan_1.html, misalnya ubah warna,
    ukuran, jenis huruf, esuai dengan kegunaan properti yang dijelaskan diatas.

    Bekerja Dengan Hyperlink


    Hyperlink digunakan untuk berpindah dokumen dengan melakukan klik pada teks atau gambar
    yang ditambahkan link kepadanya.

    Ikuti langkah berikut.


    1. Buat dokumen HTML baru dengan menekan tombol CTRL + N, atau dari Menu File 
    New. Maka akan tampil dialog pilihan dokumen seperti gambar berikut

    2. Pilih Basic Page pada Category dan pilih HTML pada sub Basic Page. Klik Create.
    3. Tulislah kata “Halaman 1” dengan format Heading 1 pada dokumen tersebut.
    4. Tulis pula kata “Loncat ke halaman 2”. Seperti terlihat pada gambar berikut.

    Copyright©2005, Deni Setiawan


    Halaman 8
    Membangun Web

    5. Simpan dengan nama latihan_2.html


    6. Buat 1 file baru seperti pada langkah 1, kemudian tulis kata “Halaman 2” dengan format
    Heading 1 dan tulis pula kata “Kembali ke halaman 1“.

    7. Simpan dengan nama latihan_3.html


    8. Aktifkan tab latihan_2.html yang terletak dibawah Document Window

    Copyright©2005, Deni Setiawan


    Halaman 9
    Membangun Web

    Tab
    latihan_2.html

    9. Blok tulisan “Loncat ke halaman 2”, kemudian pada properti link isi dengan
    latihan_3.html, atau klik tombol yang bergambar folder lalu cari file latihan_3.html lalu klik
    OK. Sehingga tulisan tersebut berubah warna menjadi biru dan bergaris bawah.

    10. Lakukan hal yang sama untuk kata “Kembali ke halaman 1“ yang terdapat pada file
    latihan_3.html. Hanya saja pada file latihan_3.html properti link diisi dengan
    latihan_2.html.

    Copyright©2005, Deni Setiawan


    Halaman 10
    Membangun Web

    11. Tampilkan file latihan_2.html pada browser kemudian klik kata “Loncat ke halaman 2”.
    Apa yang terjadi ?
    12. Coba klik juga kata “Kembali ke halaman 1“ pada file latihan_3.html

     Link dapat juga mengacu kepada alamat situs, misalnya http://www.google.co.id


     Properti target mendefinisikan bagaimana halaman target dari sebuah link
    ditampilkan, apakah _blank (menampilkan pada browser window baru), _parent
    (menampilkan pada dokumen tempat frame berada), _self (menampilkan pada
    browser aktif), atau _top (menampilkan pada halaman utama).

    Buatlah beberapa link yang mengacu ke beberapa situs internet.

    Copyright©2005, Deni Setiawan


    Halaman 11
    Membangun Web

    Bekerja Dengan Gambar


    Sebuah dokumen HTML akan lebih menarik bila ditambahkan objek-objek yang menarik seperti
    gambar, tetapi terkadang dokumen tersebut menjadi sangat berat karena terlalu banyak gambar
    yang dimasukkan. Sebagai saran gunakan gambar-gambar secukupnya pada dokumen HTML
    anda dan yang memiliki format yang dapat diakses secara cepat seperti GIF atau PNG. Bila
    gambar anda cukup besar ukurannya, cobalah untuk memotong gambar tersebut menjadi
    beberapa bagian.

    Ikuti langkah berikut :


    1. Buat file HTML baru
    2. Simpan file dengan nama latihan_4.html
    3. Untuk menambahkan gambar pada dokumen HTML dapat dilakukan dengan mengklik

    tombol Image pada Insert Bar (Tab Common), atau melalui menu Insert  Image.

    Image

    atau

    4. Kemudian cari gambar yang akan dimasukkan kedalam dokumen.

    Copyright©2005, Deni Setiawan


    Halaman 12
    Membangun Web
    Klik OK
    5. Sebaiknya gambar yang dimasukkan berada pada folder images didalam folder dokumen
    HTML yang anda buat agar memudahkan pada saat publishing ke internet. Jadi buat
    terlebih dahulu folder images kemudian kopikan file gambar yang dimasukkan ke dalam
    dokumen.
    6. Ubah properti Src dari gambar tersebut mengacu ke gambar yang telah anda kopikan ke
    folder images.

    7. Klik pada gambar untuk menampilkan properti dari gambar tersebut.


    8. Buka file latihan_4.html tersebut pada browser.

    Gambar dan Teks


    1. Buka kembali file latihan_4.html
    2. Tambahkan tulisan disebelah gambar seperti berikut

    Copyright©2005, Deni Setiawan


    Halaman 13
    Membangun Web

    3. Klik pada gambar, kemudian ubah properti Align menjadi Left, sehingga tampilan menjadi
    seperti berikut.

    4. Cobalah untuk memilih properti Align yang berbeda untuk efeknya.

    Copyright©2005, Deni Setiawan


    Halaman 14
    Membangun Web
     Untuk mengubah ukuran sebuah gambar dapat dilakukan dengan menarik node hitam
    yang otomatis muncul bila gambar tersebut diklik. Atau dengan mengubah nilai dari
    properti W dan H dari gambar tersebut.

     Cobalah untuk mengenal beberapa properti lainnya dari sebuah gambar.


     Cobalah untuk menambahkan hyperlink pada gambar

    Bekerja Dengan Tabel


    Tabel digunakan untuk membuat tampilan sebuah halaman dokumen lebih rapi dan menarik,
    selain menjadikan suatu data dapat terlihat lebih dapat dibaca.
    Ikuti langkah berikut.
    1. Buat dokumen HTML baru
    2. Simpan dengan nama latihan_5.html
    3. Klik pada tombol Insert Table atau melalui menu Insert  Table
    4. Maka anda akan melihat kotak dialog Insert Table.

    5. Isilah propertinya seperti pada gambar. Kemudian klik OK


    6. Selanjutnya anda akan melihat tabel 2x2 pada dokumen.

    Copyright©2005, Deni Setiawan


    Halaman 15
    Membangun Web
    7. Anda dapat mengubah lebar tabel tersebut dengan menarik garis luar pada tabel. Aturlah
    ukuran tabel sehingga menjadi seperti gambar berikut.

    8. Untuk menyisipkan baris, klik kanan pada salah satu kolom, lalu pilih Table  Insert Row.
    Maka otomatis akan ditambahkan satu baris diatas kolom tersebut.
    9. Untuk menyisipkan kolom, klik kanan pada salah satu kolom, lalu pilih Table  Insert
    Column. Maka akan ditambahkan satu kolom baru disebelah kiri kolom yang terpilih tadi.
    10. Bila ingin menyisipkan kolom atau baris dengan pilihan lebih detil, maka klik kanan pada
    tabel kemudian pilih Insert Rows or Columns… maka akan tampil kotak dialog Insert
    Rows or Columns.
    Baris

    Banyaknya

    Dibawah baris yang


    terseleksi atau diatasnya
    Kolom

    Banyaknya

    Disebelah kiri kolom yang


    aktif atau disebelah kanannya

    Copyright©2005, Deni Setiawan


    Halaman 16
    Membangun Web
     Anda dapat melakukan merge sel pada tabel dengan memblok sel-sel tersebut
    kemudian klik kanan lalu pilih Merge Cells. Merge sel bisa dilakukan untuk baris
    (rowspan) atau kolom (colspan).
     Anda dapat melakukan split sel pada tabel dengan menempatkan kursor pada sel yang
    akan displit, kemudian klik kanan lalu pilih Table  Split Cell, lalu tentukan apakah akan
    di-split berdasarkan kolom atau baris, tentukan pula banyaknya sel hasil split.

    Buatlah tampilan seperti berikut ini dengan menggunakan fasilitas tabel.

    Copyright©2005, Deni Setiawan


    Halaman 17

    Anda mungkin juga menyukai