Showing posts with label Materi TKJ. Show all posts
Showing posts with label Materi TKJ. Show all posts

Monday, February 11, 2019

MODUL PEMROGRAMAN WEB DESAIN PEMBUATAN TABEL DALAM HTML

Posted by Ciciku on 12:51 AM in

Dalam html, table memiliki 2 fungsi yaitu
·         Untuk mengatur informasi ke dalam bentuk tabular
·         Untuk mengatur tampilan (layout) dari suatu halaman atau bagian halaman tertentu,

Sejak kemunculan css, fungsi kedua menjadi hal yang tidak direkomendasikan karena table hanya ditujukan untuk menampilkan data dalam bentuk tabular, sedangkan tampilan (layout) sebaiknya dibuat menggunakan css.

BAGIAN-BAGIAN TABEL
Tabel memiliki bagian-bagian yang disebut kolom, baris dan sel.
Keterangan :
·         Kolom merupakan atribut table. Setiap table dapat memiliki beberapa kolom.
·         Baris merupakan isi sebuah record dari table bersangkutan.
·         Sel adalah bagian terkecil dari suatu table yang berisi data atau nilai dari kolom dan baris tertentu.


Tag HTML untuk Pembuatan table
·         <table> </table>  adalah digunakan untuk mendefinisikan table didalam dokumen html.
·         <caption> </caption> adalah digunakan untuk menyertakan judul table. Posisi judul table dapat diubah pada bagian atas atau bawah table.
·         <tr> </tr> adalah digunakan untuk membuat baris baru di dalam table.
·         <th> </th> adalah digunakan untuk membuat sel header atau judul kolom dari suatu table.
·         <td> </td> adalah digunakan untuk membuat sel dalam table. Semua data yang dimunculkan dalam suatu table harus dibuat menggunakan tag <td>.
Continue Reading

Thursday, February 7, 2019

Contoh kode html membuat tabel sederhana

Posted by Ciciku on 11:30 PM in
Berikut contoh kode html membuat tabel sederhana menggunakan border 

<html>
<head>
<title> MEMBUAT TABEL SEDERHANA</TITLE>
<BODY>
<TABLE BORDER="5">
<TR>
<TD>TABEL BORDER</TD>
</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>


Keterangan :
Setiap akan membuat sebuah table, maka harus diawali dengan tag <table> dan diakhiri dengan </table>. fungsi border disitu untuk menampilkan border sebuah tabel dengan ukuran ketebalan sesuai yang anda inginkan. apabila tidak disertai dengan border maka yang muncul hanyalah tulisan saja.
Continue Reading

Wednesday, February 6, 2019

Materi Mulok Web Design Penggunaan Table pada HTML

Posted by Ciciku on 4:05 PM in

Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris.
Terdapat 3 tag elemen utama yang digunakan dalam pembuatan table, yaitu : <table>, <tr>, dan <td>.
yang perlu diingat adalah bahwa tag <tr> dan <td> harus terletak diantara tag <table> dan </table>.

1.     <table>
Digunakan untuk mendefinisikan pembuatan table. Memiliki 12 attribut :
a.      Align : perataan rata kiri,tengah atau kanan.
b.     Valign : mengatur bentuk perataan vertical
c.      Bgcolor : mengatur warna background dari table
d.     Background : menentukan gambar yang digunakan sebagai backgrounds table
e.      Color : mengatur warna suatu sel dalam table
f.       Border : menentukan ukuran border table (dalam pixel)
g.     Rowspan : menggabungkan beberapa baris
h.     Colspan : menggabungkan beberapa kolom
i.       Cellpadding : jarak antara isi cell dengan batas cell (dalam pixel)
j.       Cellspacing : mengatur spasi/jarak antar cell (dalam pixel)
k.     Width : menentukan lebar table dalam pixel / percent
l.       Height : menentukan tinggi table

2.     <tr>
Digunakan untuk membuat baris baru pada table. Terdiri dari 3 aribut yaitu
a.      Align : perataan rata kiri,tengah atau kanan.
b.     Bgcolor : warna latar belakang dari baris
c.      Valign : perataan vertical : top, middle atau bottom

3.     <td>
Tag ini digunakan untuk membuat kolom baru pada table.
Atributnya ada 9 yaitu :
a.      Align : untuk perataan kolom
b.     Background : untuk menentukan gambar yang digunakan sebagai latar belakang dari kolom
c.      Bgcolor : untuk menentukan warna latarbelakang
d.     Colspan
e.      Rowspan
f.       Height : untuk mengatur ukuran tinggi cell dalam pixel
g.     Nowrap : untuk membuat supaya isi dari kolom tetap berada pada satu baris
h.     Valign : untuk mengatur perataan vertical
i.       Width : untuk menetukan lebar kolom dalam pixel atau percen
     Judul dalam table dibedakan menjadi 3 macam yaitu

1.       Judul table
Judul table biasa disebut CAPTION terletak dibagian luar table yang bias berada dibawah atau diatas table.Secara default diletakkan dibagian atas suatu table, tetapi juga dapat diletakkan dibawah suatu table dengan menambahkan atribut ALIGN=BOTTOM pada elemen caption tersebut.

2.       Judul kolom table
       terletak pada sel disebelah kiri atau kolom pertama suatu tabel.

3.       Judul baris table
       terletak pada baris pertama suatu tabel

Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen TABLE HEADER <TH>. 
Mengatur lebar dan tinggi suatu tabel

  1.     Lebar tabel diatur dengan menggunakan atribut width dan height untuk tinggi.
  2.     Jika atribut width dan height digunakan dalam elemen table nilainya menunjukkan lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan pada elemen TH DAN td, nilainya merupakan lebar dan tinggi dari suatu tabel.  Nilai atributnya menggunakan ukuran % (max 100%) dan ukuran pixel

Perataan dalam tabel
Dibedakan menjadi 2 macam yaitu perataan secara horizontal dengan atribut align dan perataan vertikal dengan atribut valign, serta untuk membuat suatu tabel posisinya menjadi di tengah-tengah layar browser


Membuat warna pada tabel 
Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna border dapat menggunakan beberapa atribut :
  1.     BORDERCOLOR berfungsi mengubah warna keseluruhan border
  2.     BORDERCOLORLIGHT berfungsi mengubah warna border bagian atas dan kiri
  3.     BORDERCOLORDARK berfungsi mengubah warna border bagian bawah dan kanan


Penggabungan baris/kolom
  1.     Colspan digunakan untuk menggabungkan beberapa kolom menjadi 1
  2.     Rowspan digunakan untuk menggabungkan beberapa baris menjadi 1

Note : 

Cellpadding digunakan untuk mengatur spasi antara border dengan tulisan 
Cellspacing digunakan untuk mengatur spasi antar 2 buah sel
Continue Reading

Friday, November 9, 2018

Contoh Form Pemesanan Makanan dan Minuman sederhana

Posted by Ciciku on 9:27 PM in
Gambar


Source Code

<html>
<head>
<title>form pemesanan </title>
<body >


<p> FORM PEMESANAN MAKAN DAN MINUM </P>
<table border="5">
<tr>
<td bgcolor="blue">no,</td>
<td bgcolor="blue">makanan dan minuman</td>
<td bgcolor="blue">harga</td>
<td bgcolor="blue">pesan</td>
</tr>

<tr>
<td bgcolor="YELLOW">1.</td>
<td bgcolor="YELLOW">pizza hot</td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="30000"</td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="10"</td>
</tr>

<tr>
<td bgcolor="YELLOW">2.</td>
<td bgcolor="YELLOW">spagetti</td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="35000"</td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="25"</td>
</tr>

<tr>
<td bgcolor="YELLOW">3</td>
<td bgcolor="YELLOW">es krim</td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="19000"></td>
<td bgcolor="YELLOW"><INPUT TYPE="CLEAR" VALUE="35"></td>
</tr>
</TABLE>

<BR>

<form><input type="button" value="save">
<input type="reset">
<input type="submit" value="cancel">
</form>
</body>
</head>
</html>
Continue Reading

Thursday, November 8, 2018

Model-model frame dan contoh pembuatannya

Posted by Ciciku on 10:45 PM in
Model 1


Source Code :

<html>
<head>
<title>frame</title>
<frameset cols="*,140">
<frame src="menu.html" name="Frame1">
<frame src="puisi.html" name="Frame2">
</frameset>
</head>
</html>

Model 2



Source Code :

<html>
<head>
<title>frame</title>
<frameset cols="100,*">
<frame src="menu.html" name="Frame1">
<frame src="puisi.html" name="Frame2">
</frameset>
</head>
</html>

Model 3



Source Code :

<html>
<head>
<title>frame</title>
<frameset rows="100,*">
<frame src="menu.html" name="Frame1">
<frame src="puisi.html" name="Frame2">
</frameset>
</head>
</html>

Model 4



Source Code :

<html>
<head>
<title>frame</title>
<frameset rows="*,80">
<frame src="menu.html" name="Frame1">
<frame src="puisi.html" name="Frame2">
</frameset>
</head>
</html>

Model 5



Source Code :

<html>
<head>
<title>frame</title>
<frameset rows="*,70">
<frame src="menu.html" name="Frame1">
<frameset cols="50%,50%">
<frame src="puisi.html" name="Frame2">
<frame src="info.html" name="Frame3">
</frameset>
</frameset>
</head>
</html>

Model 6



Source Code :

<html>
<head>
<title>frame</title>
<frameset cols="*,80%">
<frame src="menu.html" name="Frame1">
<frameset rows="50%,30%,20%">
<frame src="puisi.html" name="Frame2">
<frame src="info.html" name="Frame3">
<frame src="fakultas.html" name="Frame4">
</frameset>
</head>
</html>


Model 7



Source Code :

<html>
<head>
<title>frame</title>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="menu.html" name="Frame1">
<frame src="puisi.html" name="Frame2">
</frameset>

<frameset rows="50%,50%">
<frame src="info.html" name="Frame3">
<frame src="fakultas.html" name="Frame4">
</frameset>
</head>
</html>

Model 8



Source Code :

<html>
<head>
<title>frame</title>

<frameset rows="15%,70%,15%">
<frame src="menu.html" name="Frame1">
<frameset cols="15%,70%,15%">
<frame src="puisi.html" name="Frame2">
<frame src="info.html" name="Frame3">
<frame src="fakultas.html" name="Frame4">
</frameset>
<frame src="menu.html" name="data">
</frameset>
</frameset>

</head>
</html>
Continue Reading

Penggunaan Frame pada HTML

Posted by Ciciku on 10:33 PM in
Frame Html dapat dugunakan untuk membuat tampilan halaman HTML yang berbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. Sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan.

Frame mempunyai beberapa atribut yaitu

  • FRAMESET COLS mempunyai fungsi membuat frame vertikal dengan lebar kolom tertentu
  • FRAMESET ROWS mempunyai fungsi membuat frame horizontal dengan tinggi baris tertentu
  • FRAME SRC mempunyai fungsi memasukkan dokumen HTML ke dalam frame
  • NOFRAME mempunyai fungsi memasukkan body teks untuk browser yang tidak dapat menampilkan frame.
Contoh Penggunaannya :

<html>
<head>
</head>
<frameset>
<frameset src>
</frameset>
</html>

Penggunaan Atribut ROWS dan COLS pada frameset adalah

<frameset rows="tinggibaris, tinggibaris,....">
<frameset cols="lebarkolom, lebarkolom,....">
Continue Reading
Subscribe to: Posts (Atom)

Blog Cicciku . 2017 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates