P. 1
Modul 3 Dasar - Dasar HTML 2

Modul 3 Dasar - Dasar HTML 2

|Views: 68|Likes:
Published 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
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

More info:

Published by: brainanda on Aug 26, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT or read online from Scribd
See more
See less

02/06/2013

original

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. 2. 3. 4. 5. 6. 7.

Struktur Tabel dan Sel Tabel dan Gambar List dan Format Teks Body dan Format Frame IFrame 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 masingmasingnya 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're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->