Browse Category

All Tutorial

FILE FIELD

FILE FIELD

Komponen file field sering digunakan untuk keperluan upload file ke server. Penampilan komponen ini
seperti text box namun terdapat tombol untuk melakukan browse file yang akan dipilih. Untuk membuat file field,
tag yang digunakan adalah < input type=”file” name=”namakomponen” / >. Selain itu tambahkan atribut < enctype=”multipart/form=data > pada tag < form method=”post” action=”action.script” >.

Contoh Coding

<h1>Upload File</h1>
<form action=”” method=”post” enctype=”multipart/form-data”>

<input type=”file” name=”fileku” />
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Screenshot

Kesimpulan

Jadi komponen file field ini sangat berguna untuk membuat form. Contohnya jika kita akan mendaftar pada institut tertentu, dibutuhkan file field untuk mengupload foto. Komponen ini juga paling berbeda dari atribut form yang lain. Namun yang paling penting, file field ini akan sangat berguna bagi server dan user untuk kebutuhan form.

 

CHECK BOX

Check Box

Check box berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. Jadi cek box ini fungsinya sama dengan radio button, namun checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan. Contoh penggunaan input checkbox yang sering kita jumpai adalah persetujuan saat melakukan proses pendaftaran/registrasi pada sebuah website. Jika pendaftar menyetujui persyaratan dari website tempat mendaftar maka dinyatakan dengan men-check persetujuan.

Contoh Coding

<form method=”post” action=””>

<input type=”checkbox” name=”hobi” value=”memancing”/>Memancing
<br />
<input type=”checkbox” name=”hobi” value=”main game”/>Main Game
<br />
<input type=”checkbox” name=”hobi” value=”nonton film”/>Nonton Film
<br />
<input type=”checkbox” name=”hobi” value=”travelling”/>Travelling
<br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Screenshot

Kesimpulan

Kesimpulannya, pada praktikum ini kita membuat check box. Check box sendiri sangat berfungsi untuk membuat form pada HTML. Fungsi check box juga sama seperti radio button, yaitu untuk memilih sebuah pilihan. Hanya saja bedanya, jika radio button hanya bisa memiliih satu pilihan saja, maka check box bisa memilih dua pilihan. Selain itu, check box juga menggunakan atribut type=”Checkbox”. Tampilan pada check box ini juga berbeda dari yang lain. Tampilannya berupa kotak yang nantinya akan di ceklis.

 

RADIO BUTTON

RADIO BUTTON

Radio Button berungsinya yaitu digunakan untuk input data yang sifatnya optional atau pilihan. Radio button biasa digunakan untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang ada. Dalam penggunaan radio HTML, kita hanya memerlukan tag input dengan sebuah atribut type radio. Berikut format dasar radio dalam HTML: < input type=”radio”/ >. Sebelumnya menggunakan tag < form > untuk membuat form.

Contoh Coding

<form method=”post” action=””>
<input type=”radio” name=”job” value=”Dokter”>Dokter<br />
<input type=”radio” name=”job” value=”Petani”>Petani<br />
<input type=”radio” name=”job” value=”Wiraswasta”>Wiraswasta<br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data”/>
</form>

Screenshot

 

Kesimpulan

Kesimpulan yang dapat diambil dari, praktikum ini membuat radio button. Pada praktikum kali ini, radio button yang dibuat hanya dapat memilih satu pilihan saja. Radio button tentunya akan sangat berguna bagi user untuk menentukan pilihan. Pada contoh kasus kali ini, kami membuat pilihan pekerjaan yang kemudian akan dipilih user. Contoh lain misalnya pada kasus mengisi jenis kelamin. Jadi radio button ini sangat berguna untuk mengisi form.

 

VALIGN DAN ALIGN

VALIGN DAN ALIGN

Terdapat 2 atribut pada tag table, yaitu align dan valign. Atribut align pada tabel digunakan untuk mengatur
bentuk perataan data pada tabel secara horizontal. Atribut align dapat digunakan di tag table yang akan menentukan
posisi tabel atau di tag < tr >, < th > atau < td > yang akan menentukan posisi isi tabel (data) di dalam tabel secara horizontal. Sedangkan Atribut valign pada tabel digunakan untuk mengatur perataan pada tabel secara vertikal. Atribut valign ditulis pada tag < tr >, < th > atau < td > yang akan menentukan posisi isi tabel (data) di dalam tabel secara vertikal. Pada praktikum ini juga menggunakan tag < table border=”2″ align=”center” width=”40%” >. untuk membuat align dan valign.

Contoh Coding

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr>
<td rowspan=”3″ valign=”top”>Ini adalah Tabel</td>
<td>Hypertext Markup Languange</td>
</tr>
<tr>
<td align=”right”>HTML</td>

</tr>
<tr>
<td>Perintah dan tahapan Web dasar</td>
</tr>

</table>

Screenshot

Kesimpulan

Kesimpulannya, praktikum ini berbeda dari praktikum sebelumnya. Tampilan pada table pada praktikum ini berbeda dari praktikum sebelumnya. Dalam praktikum ini memanfaatkan atribut valign dan align dalam membuat table. Align dan valign ini sangat berguna untuk menentukan posisi tulisan pada tabel. Jadi align dan valign ini sangat berguna dalam menampilkan table agar terlihat lebih rapi, yaitu dengan mengatur posisi data terhadap sel.

 

MARGE CELL

MARGE CELL

Dalam sebuah tabel, dapat ditambilkan dalam format yang berbeda, contohnya adalah Marge Cell. Marge Cell merupakan fungsi untuk menggabungkan beberapa sel menjadi satu. Fungsi ini dapat menggabungkan beberapa baris atau kolom menjadi satu. Untuk menggabungkan beberapa baris digunakan rowspan. Sedangkan untuk menggabungkan beberapa kolom digunakan colspan.

Contoh Coding

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr bgcolor=”#b2dfdb”>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td colspan=”2″>Baris 2, Kolom 2 dan 3 digabung</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>

</table>

Screenshot

 

Kesimpulan

Kesimpulannya praktikum ini berbeda dari praktikum sebelumnya. Jika praktikim sebelumnya adalah memunculkan kotak dalam tabel, maka pada praktikum ini kami menggabungkan beberapa kolom dengan menggunakan colspan. Marge cell ini sangat berfungsi bagi kita karena dapat membuat tabel terlihat lebih tertata dan rapi. Selain itu juga dapat digunakan perintah rowspan untuk menggabungkan beberapa baris. Marge cell ini tentunya akan sangat berguna untuk membuat format – format tabel.

 

FORMAT TABLE

Format table

HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Untuk menampilkan table, ada beberapa format yang dapat dibuat. Dalam praktikum ini, kami membuat table dimana di dalamnya ditampilkan garis pemisah. Pada praktikum ini dengan tag < table border=”2″ align=”center” width=”40%” >. Agar membuat tampilan tag terletak di tengah. Ditambah juga tag < td bgcolor=”#eeeeee” > untuk memberikan warna pada table.

Contoh Coding

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”40%”>
<tr bgcolor=”#b2dfdb”>
<th>Nama Buah</th>
<th>Harga/kg</th>
</tr>
<tr>
<td bgcolor=”#eeeeee”> Aple</td>
<td bgcolor=”#eeeeee”>Rp.8.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Jeruk</td>
<td bgcolor=”#eeeeee”>Rp.7.500,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Kelengkeng</td>
<td bgcolor=”#eeeeee”>Rp.10.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Anggur</td>
<td bgcolor=”#eeeeee”>Rp.12.000,-</td>
</tr>
</table>

Hasil Screenshot

 

Kesimpulan

Kesimpulan yang dapat diambil adalah dalam menampilkan table ada beberapa cara dan juga ada beberapa format. Pada praktikum ini bentuk table yang ditampilkan berbeda dengan praktikum sebelumnya. Jika pada praktikum sebelumnya hanya menampilkan data table tanpa warna dan kolom atau garis pemisah, maka pada praktikum ini tampilannya terdapat warna dan juga kolom. Selain itu juga table berada di tengah halaman.

 

NESTED LIST

NESTED LIST

Salah satu fitur list yang paling menarik dari HTML ialah kemampuan untuk membangun list di dalam list. Sebuah ordered list dapat dituliskan kembali di dalam unordered list, yang keduanya berada di dalam definiton list, ataupun sebaliknya. Sama sekali tidak ada batasan dalam menuliskan list di dalam lsit, selain permasalahan makna semantik tentunya.Jadi nested list adalah dalam sebuah list terdapat list lain. Atau gampangnya, list dalam list. Pada praktikum ini menggabungkan 3 tag yaitu tag < ul >,< li >, dan < ul >.

Contoh Coding

<h1> Cara Memasak Mi Instan </h1>
<ol>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<li>Masukkan mie instan ke dalam panci</li>
<ul>
<li> Anda dapat memasukkan telur jika mau</li>
<li> Sebelum mie dimasukkan, pastikan air telah agak mendidih</li>
<li> Sebaiknya mie dipotong dahulu, supaya mie tidak terlalu panjang</li>
</ul>
</li>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ol>

Screenshot

Kesimpulan

Kesimpulan yang dapat diambil adalah nested list ini tidak berbeda jauh dengan order dan unordered list.
Nested list juga termasuk dalam jenis – jenis list yang ada di HTML. Hanya saja, nested list ini berguna untuk membuat list dalam list. Perbedaannya pada praktikum ini, menggunakan numering sedangkan pada praktikum sebelumnya menggunakan bullet.

UNORDERED LIST

UNORDERED LIST

Unordered list adalah kebalikannya yaitu metode mengurutkan daftar dengan menggunakan simbol atau special character pada html. Unordered list digunakan untuk mengelompokan data secara berurutan dalam bentuk bulleted, atau dalam bentuk squere, disk, dancircle. Pembuatan daftar pada ordered list dan unordered list pada html menggunakan < li > dan diakhiri < /li >untuk menampilkan isi dari daftar. Pada praktikum ini juga menggunakan tag tersebut. Sedangkan urordered list menggunakan < ul > dan diakhiri < /ul >. Unordered list sendiri adalah suatu daftar dalam HTML yang tidak diurutkan, jadi penempatan item-itemnya tidak harus terurut.

Contoh Coding

<ul>
<li>Jeruk</li>
<li>Apel</li>
<li>Duku</li>
<li>Stroberi</li>
<li>Nanas</li>
</ul>

Screenshot

Kesimpulan

Kesimpulan yang dapat diambil adalah Tag Unordered List mempunyai fungsi yang sama dengan tag < ol >. Hanya saja jika tag < ol > digunakan untuk menampilkan nomer urut secara otomatis, maka dengan menggunakan tag < ul > daftar yang ditampilkan tidak disertai nomor urut. Nilai defaultnya akan menggunakan tanda titik tebal.

 

ANCHOR

ANCHOR

Teks yang menghubungkan lokasi atau dokumen lain pada sebuah Website dinamakan anchor text. Singkatnya, anchor text adalah text yang bisa di klik pada sebuah hyperlink. Untuk membuat anchor, pertama harus memberi nama achor terlebih dulu pada bagian yang akan dijadikan target. Pada praktikum ini tag yang membedakan adalah contohnya < a href=”#hal1″ >Halaman 1< /a >< br / >, untuk membuat link yang menuju halaman tersebut. Lalu ada juga tag < a name=”hal1″ >Halaman 1< /a > untuk membuat judul halaman yang terhubung.

Contoh Coding

<a name=”daftar”>Daftar Isi</a>
</h1>
<p>
<a href=”#hal1″>Halaman 1</a><br />
<a href=”#hal2″>Halaman 2</a><br />
<a href=”#hal3″>Halaman 3</a><br />
</p>
<h1>
<a name=”hal1″>Halaman 1</a>
</h1>
<p>
Sebuah situs web tidak bisa berdiri sendiri. Setiap situs web harus
terintegrasi dengan suatu link. Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu obyek (dapat berupa teks ataupun gambar, bisa juga
dalam bentuk komponen form).
</p>
<p>
<a href=”daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal2″>Halaman 2</a>
</h1>
<p>
Pada contoh ini dimisalkan ada sebuah daftar isi yang terdiri dari 3
buah item yaitu halaman 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tersebut diklik (mis. halaman 1)
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor.
Langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja.
</p>
<p>
<a href=”daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal3″>Halaman 3</a>
</h1>
<p>
Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya
bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam isi tersebut. Untuk memulai membuat tabel dalam halaman web pertama kali
harus diberikan tag pembuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukkan tag untuk membuat baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris sedangkan untuk nama
kolom pada tabel gunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam berita tr dan tr.
</p>
<p>

Screenshot

Kesimpulan

Kesimpulannya adalah, anchor penting digunakan untuk sebuah website. Anchor ini tak berbeda jauh dengan hyperlink. Lalu mengapa sangat penting? Karena anchor dapat memudahkan pembaca untuk mencari bahan yang ada dalam website. Pembaca tidak harus mengscroll, jadi hanya mengklik achor maka akan sampai di bahan website tersebut.

LINK

INTERNAL LINK

Link adalah sambungan atau koneksi dari sebuah sumber ke sumber yang lainnya, misalnya dalam sistem networking atau internet. Dalam postingan artikel, link sendiri adalah url yang di sisipkan pada sebuah kata atau kalimat yang terdapat pada uraian informasi. Jadi intinya link itu adalah sebuah tautan yang menghubungkan antara satu halaman ke halaman lain. Link ini menggunakan tag < a href=link yang dituju” > link yang dituju < /a >.

Contoh Coding

<h1>Link</h1>
<p> Klik link berikut
<a href=”13_M3118024_image.html”> Link </a>
</p>

Hasil Screenshot

Kesimpulan

Kesimpulannya adalah link sangat diperlukan di setiap website. Baik untuk maksud tertentu seperti menambah sumber dan lain sebagainya. Dalam percobaan kali ini, kita menggunakan link Interlink atau internal link, karena masih dalam suatu website. Internal link ini berguna untuk mempermudah pengunjung dalam pencarian artikel. Dalam membuat link, menggunakan tag < a > dan diakhiri < /a >

  • 1
  • 2