Dutormasi.com – Halo sahabat dutormasi!!. Kembali lagi ni di postingan HTML. Pastinya gak bosan ya. kali ini kita akan membahas bagian yang menarik yaitu bagaimana cara membuat table sekaligus merapikan form yang kita buat kemarin. Yuk langsung aja kita bahas.

Tabel

Tabel adalah data yang berisi informasi yang terdiri dari kolom , baris, dan sel. Dengan html kita menggunakan tag <table> untuk mendeklarasikan table yang kita buat. Ada beberapa tag untuk membuat tabel di HTML:

<table> untuk mendeklarasikan tabelnya

<thead> untuk kepala dari tabel

<tbody> untuk body dari table

<th> untuk membuat judul kolom

<tr> untuk membuat baris

<td> untuk membuat sel

Oke langsung aja yuk kita praktekkan

1. Langsung buka saja code editor kita dan buka project di postingan kita sebelumnya. Disini saya menggunnakan Visual Studio Code.

2. Setelah itu kita tambahkan satu image lagi.(cara menambahkan image).

3. Lalu setelah itu kita tambahkan tag <table> dibawah form yang sudah kita buat dan berikan border sebesar 1

<table border="1">

</table>

4. Lalu table diatas kita dapat memindahkannya ke atas tag form kita.

5. Lalu ikuti sintax dibawah ini

<table border="1">
        <form method="POST">
        <tr>
            <th colspan="3">Form Pendaftaran</th>
        </tr>
        <tr>
            <td rowspan="6">
                <img src="./img/Asset 2.png" width="300px" />
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>Pass</td>
            <td><input type="password" ></td>
        </tr>
        <tr>
            <td>Asal</td>
            <td>
                <Select>
                    <option value="indonesia">Indonesia</option>
                    <option value="Luar Negeri">Luar Negeri</option>
                </Select>
            </td>
        </tr>
        <tr>
            <td>Jenis Kelamin</td>
            <td>
                <input type="radio" name="gender" value="Pria">Laki-Laki
                <input type="radio" name="gender" value="Wanita">Wanita
            </td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td colspan="3" align="center"><input type="submit" value="Login"></td>
        </tr>
    </form>
    </table>

6. Jangan lupa seandainya kalau kalian copas code diatas, hapus form yang telah kita buat di postingan sebelumnya. Maka hasilnya akan menjadi seperti ini.

7. Jika ingin lebih rapi lagi kita hapus saja border yang kita buat diawal dan lihat hasilnya hehe. Guna border adalah mengetahui bentuk table yang kita buat.

Hayo ada banyak yang berubah kan? Dilihat dari sana ada banyak sekali elemen baru dan beberapa tag seperti <br> telah dihapus. Tapi gak masalah kita akan berikan keterangannya satu satu.

Keterangan :

colspan    = menggabungkan kolom

rowspan  = menggabungkan baris

width       = menagtur ukuran panjang

align         = menentukan letak dari suatu gambar/tulisan

border      = garis pembatas tabel

Oke sekian ya postingan kali ini. Untuk belajar tabel ini sebenarnya susah susah gampang, teteapi kalau sudah paham pasti menyenangkan. Caranya yaitu harus banyak belajar dan selalu kembangkan diri teman teman. Semoga postingan ini bermanfaat. Salam Dutormasi.

Dutormasi.com – Halo sahabat dutormasi!!. Kembali lagi di postingan yang membahas tentang web, baiklah kali ini kita akan membahas kembali tentang tag-tag pada HTML (yuk baca lagi tentang HTML). Pada kesempatan kali ini kita akan membahas tentang form pada HTML dan bagaimana cara membuatnya. Sebenarnya FORM itu apa sih? Langsung kita ulas ya..

FORM

Form disini ialah tempat pengisian suatu data agar dapat dikirimkan, diproses dan digunakan kembali suatu waktu, seperti contoh Form pendaftaran, form login, form data nasabah dll. Form digunakan untuk menyimpan data yang kita inputkan, dan dalam penggunaannya melibatkan bahasa pemrograman seperti PHP. Untuk membuat Form ada banyak elemen yang dapat ditambahkan seperti input, radio, button, textarea, select option, label dll.

Masih belum paham? yuk sama-sama kita belajar membuat FORM sederhana

1. Siapkan index.html postingan sebelumnya.

2. Setelah terbuka maka akan tampil seperti ini.

3. Yuk kita ubah kalimat di tag <h2> dan <p> seperti berikut

<h2>Form Pendaftaran</h2>

<p>Silahkan daftarkan diri anda untuk mengikuti pelatihan Dutormasi</p>

4. Nah dibawah tulisan tersebut kita tambahin tag form , sekaligus masukkan elemen method=”POST”, nya juga ya seperti ini:

<form method="POST">

</form>

5. Baiklah selanjutnya kita buat label dan inputnya didalm form oke.

 Email :
 <input type="text"> <br>
 Pass :
 <input type="password"> <br>
 <input type="submit" value="Login">

6. Maka akan terlihat seperti ini..

7. Oke selanjutnya bisa kita tambahin aja ya

<form method="POST">
        Email :
        <input type="text"> <br><br>
        Pass :
        <input type="password" > <br><br>
        Asal
        <Select>
            <option value="indonesia">Indonesia</option>
            <option value="Luar Negeri">Luar Negeri</option>
        </Select>
        <br><br>
        Jenis Kelamin : 
        <input type="radio" name="gender" value="Pria">Laki-Laki
        <input type="radio" name="gender" value="Wanita">Wanita
        <br><br>
        Alamat : <br>
        <textarea cols="50" rows="5"></textarea>
        <br><br>
        <input type="submit" value="Login">
    </form>

8. Tampilannya akan menjadi seperti ini

Jika kalian teliti pasti banyak terdapat elemen baru yang kalian lihat kan.? Ini hanya baru sebagian saja sebagai contoh, sebenarnya masih banyak lagi elemen yang dapat ditambahkan dalam tag-tag tersebut. Sebagai contoh contoh kita mengetahui ada tag <br> yang mana fungsinya untuk memberi baris baru.

Keterangan:

    form         : Deklarasi pembuatan form

    method     : aksi yang akan dilakukan oleh form

    input         : Sebuah tag pengisian data

    type           : tipe dari pengisian data tersebut

    select         : membuat opsi pemilihan dropdown

    option       : opsi yang tertera pada dropdown

    name         : penamaan dari tag input

    br               : memberikan baris baru

    value          : data default dari sebuah form

Gimana pembuatan form nya.? Pasti masih bernatakan ya… ya wajar saja karena kita masih belajar HTML yaitu sebuah kerangka dari sebuah web. Postingan selanjutnya kita coba rapikan secara sederhana, masih menggunakan tag HTML juga, Penasaran kan?. Jadi terus ikuti postingannya ya. Salam Dutormasi.

Dutormasi.com – Halo sahabat Dutormasi!! Kali ini kita kembali lagi ni membahas pembuatan web Sederhana dan kali ini kita akan coba membahas memasukkan gambar ke dalam web. Pastinya biar tambah keren dong. Nah sebelum kita masuk ke pembuatan web dengan HTML nya pastikan baca dulu ya yang sebelumnya (Membuat Heading dan Paragraf menggunakan HTML). Nah yuk langsung kita bahas.

Menambahkan gambar ini sangat penting untuk mempercantik tampilan web kita. Dengan adanya gambar membuat pandangan kita terhadap suatu web membuat kita tidak bosan dan memahami informasi melalui dengan gambar. Sintax nya juga gak sulit kok, hanya menambahkan tag img pada file HTML yang sudah kita buat kemarin.

Bahan yang harus disiapkan yaitu pastinya gambarnya, ya kan?. Mencari gambar ini bisa kita buat, download atau hanya berupa URL saja. Tapi disini saya akan menggunakan logo dari Dutormasi sendiri seperti yang terlihat pada gambar dibawah.

Untuk Selanjutnya ikuti langkah2 berikut ya!!

1. Pindahkan dulu file HTML dan gambar di satu tempat.Disini saya akan memasukkan kedua file ke Folder “web”. Fungsinya agar kita mudah untuk melakukan pemasukkan gambarnya ke dalam sintax HTML.

2. Buat lagi folder ke didalam folder web dengan nama folder img (optional).

3. Setelah itu kita buka lagi file HTML kita yang sudah kita buat sebelumnya. Kali ini mimin menggunakan Visual Studio Code ya… Pakai Notepad biasa juga masih bisa kok.

4. Setelah itu, dibawah tulisan dutormasi yuk kita masukkan gambar kita dengan menambahkan sintax

<img src="" >

5. Didalam tanda kutip src ini kita akan memasukan alamat / posisi dari gambar yang sudah kita siapkan tadi. Yaitu img/namafile.png . Nama file disini harus benar-benar sama ya besar kecil hurufnya. Kita contohkan dengan yang mimin buat. Sekaligus kita atur besar gambarnya ya

<img src="img/BARU.png" width="200px" height="200px">

6. Selanjutnya, tinggal disave deh file HTML nya. Code terlihat menjadi seperti ini.

(Yang mau source code nya balik lagi ke postingan sebelumnya ya..)

7. Nah, bagi kalian yang teliti pasti bisa liat ada kode yang kita tambahkan. Ada yang tau? Yap benar tag <center> yang membuat teks dan gambar kita menjadi ke tengah. Hasilnya akan menjadi seperti ini.

Sedikit lebih baguskan? Terus ikuti postingan ya, kita akan buat tampilan web sederhana kita menjadi lebih bagus lagi dari ini secara pelan-pelan. Semoga bermanfaat ya untuk teman- teman. Baiklah mungkin sampai sini saja postingan kali ini. Sekian dan terima kasih.

Salam Dutormasi !!