Scribd Logo
Upload

Welcome to Scribd!

  • Modul 3 Dasar - Dasar HTML 2

    Uploaded by

    brainanda
    79 views16 pages
    Di artikel ini, kalian akan diberi tahu lebih dalam mengenai dasar - dasar HTML. Nanti kalian bisa membuat struktur tabel dan sel, atau mungkin tabel dengan gambar didalamnya, format text maupun paragraf seperti center atau left atau right alignment, dan masih ada yang lainnya. untuk lebih lengkapnya download di : http://www.ziddu.com/download/11388907/Modul_3_Dasar_-_Dasar_HTML_2.ppt.html Saya harap kalian bisa lebih memahami mengenai HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Di artikel ini, kalian akan diberi tahu lebih dalam mengenai dasar - dasar HTML. Nanti kalian bisa membuat struktur tabel dan sel, atau mungkin tabel dengan gambar didalamnya, format text maupun paragraf seperti center atau left atau right alignment, dan masih ada yang lainnya. untuk lebih lengkapnya download di : http://www.ziddu.com/download/11388907/Modul_3_Dasar_-_Dasar_HTML_2.ppt.html Saya harap kalian bisa lebih memahami mengenai HTML

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT or read online from Scribd
    Flag for inappropriate content
    79 views16 pages

    Modul 3 Dasar - Dasar HTML 2

    Uploaded by

    brainanda
    Di artikel ini, kalian akan diberi tahu lebih dalam mengenai dasar - dasar HTML. Nanti kalian bisa membuat struktur tabel dan sel, atau mungkin tabel dengan gambar didalamnya, format text maupun paragraf seperti center atau left atau right alignment, dan masih ada yang lainnya. untuk lebih lengkapnya download di : http://www.ziddu.com/download/11388907/Modul_3_Dasar_-_Dasar_HTML_2.ppt.html Saya harap kalian bisa lebih memahami mengenai HTML

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT or read online from Scribd
    Flag for inappropriate content
    of 16

    Modul-3 :

    Memahami Dasar HTML (2)

    Sel dan struktur Tabel, struktur


    List, Anatomi frame, navigasi
    menu

    Modul-3 HTML (2) 1


    Dalam modul ini akan dipelajari:

    1. Struktur Tabel dan Sel


    2. Tabel dan Gambar
    3. List dan Format Teks
    4. Body dan Format
    5. Frame
    6. IFrame
    7. MENU

    Modul-3 HTML (2) 2


    1. Tabel dan Sel

     Tag Untuk membuat tabel


    adalah :
    <table border=ukuran
    cellpadding=ukuran_sel
    cellspacing=jarak_sel width=
    %lebar>

     Tag untuk membuat baris dan


    kolom :
    <tr> ..</tr> = membuat baris
    <td width=%lebar>..<td> = %
    lebar kolom
    Contoh :

    Modul-3 HTML (2) 3


    Border, Cellpadding dan cellspacing

     Cellpadding = angka yang


    menunjukkan skala besarnya
    kotak tabel
     Cellspacing = angka yang
    menunjukkan jarak antar sel
     Border = angka yang
    menunjukkan tebal bingkai
    tabel
     Width = pada tabel
    menunjukkan berapa persen
    lebar tabel dibanding layar
     Width = pada kolom berapa
    persen lebar tabel; dibagi
    kolom

    Modul-3 HTML (2) 4


    2. Tabel dengan sel berisi gambar
     Pada prinsipnya
    isi dari sel dalam
    tabel adalah
    bebas, bisa
    berisi teks
    gambar, atau
    link yang
    masing-
    masingnya
    dapat diformat
     Berikut ini
    contoh tabel
    dengan sel-sel
    berisi gambar
    Demo program

    Modul-3 HTML (2) 5


    2. List dan Format teks

     Format paragraf dan teks


    <p align=center/left/right> : atur
    paragraf
     Superscript : <SUP>..</SUP>
     Subscript : <SUB>..</SUB>
     List Un order : <UL>..</UL>
     Elemen List : <LI>..</LI>

    DEMO
    Modul-3 HTML (2) 6
    3. Body dan Format
     <Body ..> </Body>
     TEXT = warna teks
     BGCOLOR=warna background layar
     BACKGROUND= URL, warna latar belakang
     LINK = warna link
     ALINK = warna link yang dipilih
     VLINK=warna link yang sudah dikunjungi
     ONLOAD=perintah dilaksanakan setelah halaman
    didownload
     ONUNLOAD=perintah ketika halaman ditutup

    Modul-3 HTML (2) 7


    4. Input Keyboard <INPUT>

     Meminta masukan dari user


     TYPE=text | password | button | checkbox | radio | submit | reset
     NAME=string, sebagai handel jika GUI dalam form
     VALUE=string, nilai input (default)
     SIZE=number (panjang kotak)
     MAXLENGTH=number (panjang max karakter)
     SRC=lokasi URL/gambar
     ALT=string (keterangan gambar)
     DISABLED=menyembunyikan elemen
     ONFOCUS= string, kotak yang menerima fokus
     ONCLICK= string, perintah yang akan dilaksanakan
     ONCHANGE= string, nilai yang akan diganti

    Modul-3 HTML (2) 8


    Contoh masukan 1 : Password

    Klik lihat
    hasil

    demo

    Modul-3 HTML (2) 9


    5. Frame
     <FRAME> adalah Tag HTML yang berfungsi untuk membagi layar
     Beberapa perintah itu adalah
     <FRAMESET>
     < FRAME>
     <IFRAME>
     <FRAMESET>..</FRAMESET> memiliki parameter :
     ROWS = panjang baris (pixel)
     COLS=panjang kolom (pixel)
     ONLOAD=string (semua frame sudah diload)
     ONUNLOAD(=string (semua string telah dihapus)
     <FRAME>..</FRAME> memiliki parameter :
     NAME =nama frame
     SRC = URL (isi frame)
     FRAMEBORDER =[0 | 1]
     MARGINWIDTH=pixel (batas kiri thd isi frame)
     MARGINHEIGHT=pixel (batas atas thd isi frame)
     SCROLLING =[yes | no ]

    Modul-3 HTML (2) 10


    Contoh membuat Frame (1)

     Buatlah satu file HTML berisi sbb :


     disimpan dalam KeteranganFrame.html :

     Buatlah satu file HTML berisi sbb :

    Klik 3 kali
    Demo sebenarnya

    Modul-3 HTML (2) 11


    Contoh membuat Frame (2)

    • Membagi layar menjadi 4 bagian


    • Sediakan 3 buah gambar dan 1 buah file HTML
    •Ketik kode HTML sebagai berikut ( hanya ditulis SRC saja)

    Klik untuk
    lihat hasil

    Demo sebenarnya

    Modul-3 HTML (2) 12


    6. IFRAME

     IFRAME adalah cara membuat frame dengan lebar dan tinggi ditentukan
    sendiri (dalam pixel)
     Selanjutnya frame dapat diletakkan ditengah, kiri atau kanan layar
     <IFRAME SRC=“sumber” WIDTH=lebar HEIGHT=tinggi>

    Klik untuk lihat Hasil

    Klik demo

    Modul-3 HTML (2) 13


    7. MENU <SELECT>..</SELECT>

     Cara membuat menu pilihan


    adalah dengan
    <SELECT>..</SELECT>
     Pilihan yang tersedia dengan
    <OPTION>..</OPTION> Klik lihat hasil

    demo

    Modul-3 HTML (2) 14


    Rangkuman

     Membuat tabel diperlukan beberapa tag


    <table>..<table> yang didalamnya ada baris dengan
    <TR>..</TR> dan kolom dengan <TD>..</TD>
     Untuk membuat list digunakan <UL>..</UL> yang tiap item listnya
    adalah <LI>..</LI>
     Untuk membuat frame dapat dipilih menggunakan
    <FRAMESET>.. Dengan <FRAME> atau ditentukan sendiri lebar
    dan tinggi framenya dengan <IFRAME> dengan <FRAME>
     Untuk input data dari keyboard dapat digunakan tag <INPUT
    TYPE=tipeinput> diman atipe input dapat berupa =text, button,
    radio, password dll
     Untuk membuat menu pilihan digunakan tag
    <SELECT>..</SELECT> dengan setiap item pilihan dimasukkan
    dengan mengggunakan tag <OPTION>..</OPTION>

    Modul-3 HTML (2) 15


    Latihan

    1. Buatlah dokumen HTML


    Untuk menampilkan tabel
    sebagai berikut ini :
    Ketentuan : Judul tabel
    biru, judul kolom tebal,
    untuk angka pada nomor
    ditengah kolom

    2. Buatlah Frame Sebanyak


    empat yang disusun
    kebawah seperti sajian
    berikut. Gambar dan
    dokumen html silahkan
    didefinisikan sendiri.

    Modul-3 HTML (2) 16

    You might also like