Checknox digunakan untuk memberikan keleluasaan kepada user dalam memberikan pilihan.
perhatikan tampilan di bawah ini:
Contoh Penggunaan Checkbox
Untuk menggunakan checkbox berikut adalah kodingnya:
<html>
<head>
</head>
<body>
<form>
<table>
<tr>
<td>Hoby</td><td>
<input type="checkbox" name="hoby">Membaca</input><br />
<input type="checkbox" name="hoby">Olahraga</input><br />
<input type="checkbox" name="hoby">Hiking</input><br />
<input type="checkbox" name="hoby">Turing</input><br />
<input type="checkbox" name="hoby">Game Online</input>
</tr>
</table>
</form>
</body>
</html>
Thursday, February 21, 2013
Tuesday, February 19, 2013
Soal Web Dasar 1
Jawablah soal-soal di bawah ini dengan cara mengklik radio button pada jawaban yang anda Anggap benar.
1. Kepanjangan dari HTML adalah...........
2. Penulisan tag HTML yang benar adalah..........
3. Efek dari penggunaan tag <font color=#000000> adalah
4. Elemen <a> digunakan untuk .........
5. Elemen yang tepat untuk membuat menu pada web adalah......
1. Kepanjangan dari HTML adalah...........
2. Penulisan tag HTML yang benar adalah..........
3. Efek dari penggunaan tag <font color=#000000> adalah
4. Elemen <a> digunakan untuk .........
5. Elemen yang tepat untuk membuat menu pada web adalah......
Tag Hyperlink Untuk membuat link
elemen <a> digunakan untuk membuat link antara satu file yang satu dengan yang lain. Sehingga web menjadi lebih menarik.
Mengapa menarik karena setiap file yang diasosiasikan sebagai halaman, dapat fokus pada satu informasi saja.
Contoh:
Halaman pendaftaran dapat fokus pada pendaftaran tanpa menampilkan isi yang lain.
Halaman beranda dapat fokus pada beranda, tanpa memuat informasi yang lain.
Berikut kami berikan contoh membuat link.
Pertama anda persiapkan dua file html dengan posisi sejajar (artinya pada level yang sama/pada folder yang sama.). Contoh file: beranda.html dan pendaftaran .html.
Pada file beranda.html ketiklah baris program berikut:
Pada file pendaftaran.html ketiklah baris program berikut:
Mengapa menarik karena setiap file yang diasosiasikan sebagai halaman, dapat fokus pada satu informasi saja.
Contoh:
Halaman pendaftaran dapat fokus pada pendaftaran tanpa menampilkan isi yang lain.
Halaman beranda dapat fokus pada beranda, tanpa memuat informasi yang lain.
Berikut kami berikan contoh membuat link.
Pertama anda persiapkan dua file html dengan posisi sejajar (artinya pada level yang sama/pada folder yang sama.). Contoh file: beranda.html dan pendaftaran .html.
Pada file beranda.html ketiklah baris program berikut:
<html>
<body>
<a href="pendaftaran.html">Pendaftaran</a>
</body>
</html>
<body>
<a href="pendaftaran.html">Pendaftaran</a>
</body>
</html>
Pada file pendaftaran.html ketiklah baris program berikut:
<html>
<body>
<a href="beranda.html">Kembali ke beranda</a>
</body>
</html>
<body>
<a href="beranda.html">Kembali ke beranda</a>
</body>
</html>
Monday, February 18, 2013
Menyimpan dokumen HTML
File atau dokumen HTML disimpan menggunakan extension (.) html atau htm.
Contoh:
web.html
biodata.htm
Kedua file tersebut merupakan file-file HTML.
Untuk membuka kedua file tersebut harus menggunakan browser/perambah.
Prosedur untuk menyimpan file HTML adalah:
Jika Anda menggunakan notepad, maka prosedurnya adalah:
1. klik file>>Save As
2. Pada file type Anda pilih All File
3. Untuk File Nama simpan dengan nama apa saja
4. Extension (.) adalah .html atau .htm
Contoh:
web.html
biodata.htm
Kedua file tersebut merupakan file-file HTML.
Untuk membuka kedua file tersebut harus menggunakan browser/perambah.
Prosedur untuk menyimpan file HTML adalah:
Jika Anda menggunakan notepad, maka prosedurnya adalah:
1. klik file>>Save As
2. Pada file type Anda pilih All File
3. Untuk File Nama simpan dengan nama apa saja
4. Extension (.) adalah .html atau .htm
Mengenal Elemen HTML
Dalam HTML dikenal Elemen/Tag dan Attribut.
Struktur dasar HTML adalah :
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Atribut merupakan bagian dari elemen/tag.
Jumlah atribut pada setiap elemen dapat lebih dari satu
penulisan atribut adalah sebagai berikut:
<ELEMEN ATRIBUT=NILAI>
contoh:
<BODY BGCOLOR="YELLOW">
Contohnya lengkapnya adalah:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="YELLOW">
INI ADALAH ELEMEN HTML PERTAMA SAYA
</BODY>
</HTML>
Berikut adalah elemen-elemen dalam HTML
1.<HTML>..........</HTML>
2. <HEAD> ........</HEAD>
3. <BODY> ........</BODY>
Struktur dasar HTML adalah :
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Atribut merupakan bagian dari elemen/tag.
Jumlah atribut pada setiap elemen dapat lebih dari satu
penulisan atribut adalah sebagai berikut:
<ELEMEN ATRIBUT=NILAI>
contoh:
<BODY BGCOLOR="YELLOW">
Contohnya lengkapnya adalah:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="YELLOW">
INI ADALAH ELEMEN HTML PERTAMA SAYA
</BODY>
</HTML>
Kombinasi Form dan Table menggunakan HTML
Kombinasi Form dan HTML sangat bermanfaat dalam membuat form
Membuat Form Menggunakan HTML
Form digunakan agr user dapat berinteraksi dengan sistem.
Contoh form perhatikan tampilan di bawah ini
ENTRY NAMA DAN PASSWORD
Untuk membuat form di atas, baris programnya adalah sebagai berikut:
<HTML>
<BODY>
ENTRY NAMA DAN PASSWORD<br />
<form name="isian">
<br />
NAMA<input name="namaku" type="text" /><br />
PASSWORD<input name="passwordku" type="text" /><br />
<input name="simpan" type="submit" value="simpan" /><input name="clear" type="RESET" value="Bersih" />
</BODY>
</HTML>
Penjelasan baris program di atas:
1. <FORM NAME="ISIAN">
NAME pada elemen form digunakan untuk memberi nama form. contoh nama form di atas adalah ISIAN.
2. <INPUT NAME="NAMAKU" TYPE="TEXT" />
Input digunakan untuk elemen input pada form, TYPE digunakan memilih jenis elemen input.
NAME digunakan untuk memberi nama elemen input.
terdapat elemen input : TEXT,SUBMIT, RADIO, RESET,CHECKBOX, HIDDEN,PASSWORD.
3. <INPUT NAME="SIMPAN" TYPE="SUBMIT" VALUE="SIMPAN">
VALUE digunakan untuk menampilkan label pada elemen input.
Untuk mempercantik tampilan form anda bisa mengkombinasikannya dengan menggunakan table.
Perhatikan tampilan form di bawah ini:
ENTRY NAMA DAN PASSWORD
Contoh form perhatikan tampilan di bawah ini
ENTRY NAMA DAN PASSWORD
Untuk membuat form di atas, baris programnya adalah sebagai berikut:
<HTML>
<BODY>
ENTRY NAMA DAN PASSWORD<br />
<form name="isian">
<br />
NAMA<input name="namaku" type="text" /><br />
PASSWORD<input name="passwordku" type="text" /><br />
<input name="simpan" type="submit" value="simpan" /><input name="clear" type="RESET" value="Bersih" />
</BODY>
</HTML>
Penjelasan baris program di atas:
1. <FORM NAME="ISIAN">
NAME pada elemen form digunakan untuk memberi nama form. contoh nama form di atas adalah ISIAN.
2. <INPUT NAME="NAMAKU" TYPE="TEXT" />
Input digunakan untuk elemen input pada form, TYPE digunakan memilih jenis elemen input.
NAME digunakan untuk memberi nama elemen input.
terdapat elemen input : TEXT,SUBMIT, RADIO, RESET,CHECKBOX, HIDDEN,PASSWORD.
3. <INPUT NAME="SIMPAN" TYPE="SUBMIT" VALUE="SIMPAN">
VALUE digunakan untuk menampilkan label pada elemen input.
Untuk mempercantik tampilan form anda bisa mengkombinasikannya dengan menggunakan table.
Perhatikan tampilan form di bawah ini:
ENTRY NAMA DAN PASSWORD
membuat perataan pada table menggunakan HTML
Perataan(alignment) pada table sangat penting untuk memperjelas maksud dari informasi.
Perhatikan table di bawah ini:
| No | Nama Karyawan | Jabatan |
| 1 | Suhardi | Direktur Utama |
| 2 | Junaedi | Direktur Teknik |
Tabel di atas dibuat tanpa perataan.
Perhatikan table di bawah ini
| No | Nama Karyawan | Jabatan |
| 1 | Suhardi | Direktur Utama |
| 2 | Michael Juhardi Sinulingga | Direktur Teknik |
Untuk membuat perataan pada table, baris programnya adalah sebagai berikut:
<HTML>
<HEAD></HEAD>
<BODY>
<table border=1>
<tr align=center>
<td>No</td><td>Nama Karyawan</td><td>Jabatan</td>
</tr>
<tr>
<td>1</td><td>Suhardi</td><td>Direktur Utama</td>
</tr>
<tr>
<td>2</td><td>Junaedi</td><td>Direktur Teknik</td>
</tr>
</table>
</BODY>
</HTML>
Selamat Mencoba!!!!!
menebalkan garis tabel
Penebalan garis pada tabel (border) penting untuk membedakan kolom 1 dengan lainnya atau membedakan baris 1 dan lainnya.
perhatikan tabel di bawah ini.
</TABLE>
perhatikan tabel di bawah ini.
| No | Nama | Alamat |
| 1 | Andika | Kp. Sukamulya Kelurahan Sukamulya Kecamatan Cikupa |
| 2 | Yastril | Kp. Cukanggalih Desa Curug Kecamatan Curug |
Bedakan dengan tabel di bawah ini
| No | Nama | Alamat |
| 1 | Andika | Kp. Sukamulya Kelurahan Sukamulya Kecamatan Cikupa |
| 2 | Yastril | Kp. Cukanggalih Desa Curug Kecamatan Curug |
terlihat bedanya, yaitu adanya border(penebalan garis).
Untuk membuat penebalan garis hanya dengan menambahkan value pada elemen border.
Berikut contohnya;
<TABLE BORDER=1>....</TABLE>
Kode program lengkapnya adalah:
<HTML>
<HEAD>
<TITLE>TABLE PERTAMA</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>No</TD><TD>Nama</TD><TD>Alamat</TD>
</TR>
<TD>1</TD><TD>Andika</TD><TD>Kp. Sukamulya Kelurahan Sukamulya Kecamatan Cikupa</TD>
</TR>
<TD>2</TD><TD>Yastril</TD><TD>Kp. Cukanggalih Desa Curug Kecamatan Curug</TD>
<TR>
</TABLE>
</BODY>
</HTML>
Sunday, February 17, 2013
Membuat Table menggunakan HTML
Untuk membuat table menggunakan HTML adalah sebagai berikut:
<HTML>
<head>
<title>HTML pertama</title>
</head>
<body>
<table>
<tr>
<td>NO</td><td>NAMA</td><td>ALAMAT</td>
</tr>
<tr>
<td>1</td><td>MELSANDY</td><td>KUALA LUMPUR, MALAYSIA</td>
</tr>
</table>
</body>
</html>
HTML pertama
<HTML>
<head>
<title>HTML pertama</title>
</head>
<body>
<table>
<tr>
<td>NO</td><td>NAMA</td><td>ALAMAT</td>
</tr>
<tr>
<td>1</td><td>MELSANDY</td><td>KUALA LUMPUR, MALAYSIA</td>
</tr>
</table>
</body>
</html>
| NO | NAMA | ALAMAT |
| 1 | MELSANDY | KUALA LUMPUR, MALAYSIA |
Dasar Pembuatan Web
Dasar Pembuatan Web
Untuk membuat web ada beberapa keilmuan web yang harus dimiliki, yaitu:
1. HTML
2. CSS
3. Server side programming
4. Database
5. Javascript.
1. HTML
Merupakan akronim dari Hypertext Markup Language. HTML merupakan
2. CSS
Merupakan kepanjangan dari Cascading Style Sheet.
3. Server side programming
Bahasa yang digunakan untuk server side dapat menggunakan yang berbayar atau yang free
Subscribe to:
Posts (Atom)