Categories: HTMLWeb Programming

Tag HTML yang sering dipakai untuk membuat halaman website (part 3)

Bismillaahirrohmaanirrohiim…

Untuk belajar HTML tidak perlu sangat lengkap, karena berbekal pemahaman konsep dasarnya sudah cukup untuk membuat HTML sebagaimana fungsinya.

Pada materi kali ini, kita akan mencoba membuat beberapa file html yang saling berkaitan satu sama lain yang berisi beberapa TAG HTML yang sering dipakai untuk membuat website.

Sebelum lebih jauh, konsep dasar HTML harus paham, kalau belum silahkan baca artikel sebelumnya HTML dasar yang mudah sekali.

Siapkan otak kita untuk fokus sejenak membuat kode-kode di bawah ini, diketik ulang lebih baik.

– Buat file index.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Home - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a>
        </div>

        <div class="content">

            <h1>Home</h1>
            
            <p>Ini adalah sebuah paragraf pertama.</p>
            <p align="center">Ini adalah sebuah paragraf kedua (di tengah).</p>
            <p align="right">Ini adalah sebuah paragraf ketiga (di kanan).</p>

        </div>        

    </body>
</html>

Hasilnya:

index.html

– Buat file typography.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\typography.html

<!DOCTYPE html>
<html>
    <head>
        <title>Typography - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a>
        </div>

        <div class="content">

            <h1>Typography</h1>

            <p>
                Ganti baris.
                <br />
                Ada horizontal rules
                <hr />
                Format: <strong>tebal</strong>, <em>miring</em>, <small>huruf kecil</small>
                <br />
                Warna: <span style="color:#ff0000">merah</span> <span style="color: blue">Biru</span>
            </p>

            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>

        </div>        

    </body>
</html>

Hasilnya:

typhography.html

– Buat file table.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\table.html

<!DOCTYPE html>
<html>
    <head>
        <title>Table - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a>
        </div>

        <div class="content">

            <h1>Table</h1>

            <table border = "1">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Alamat</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Budi</td>
                        <td>Jakarta</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Anto</td>
                        <td>Bandung</td>
                    </tr>
                </tbody>
            </table>

        </div>        

    </body>
</html>

Hasilnya:

table.html

– Buat file form.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\form.html

<!DOCTYPE html>
<html>
    <head>
        <title>Form - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a> 
        </div>

        <div class="content">

            <h1>Form</h1>
            
            <form method="GET" action="form.html" style="border: 1px solid #ccc;padding: 5px;width: 500px;">
                Nama: <input type="text" name="nama" placeholder="Nama" />
                <hr />
                Email: <input type="email" name="email" placeholder="Email" />
                <hr />
                Password: <input type="password" name="password" placeholder="Password" />
                <hr />
                Alamat: <input type="text" name="alamat" placeholder="Alamat" />
                <hr />
                Foto: <input type="file" name="foto" />
                <hr />
                Jenis Kelamin: 
                    <label><input type="radio" name="gender" value="Laki-laki" /> Laki-laki</label>
                    <label><input type="radio" name="gender" value="perempuan" /> Perempuan</label>
                <hr />
                Hobi Pemrograman: 
                    <label><input type="checkbox" name="hobi[]" value="html" /> HTML</label>
                    <label><input type="checkbox" name="hobi[]" value="css" /> CSS</label>
                    <label><input type="checkbox" name="hobi[]" value="js" /> Javascript</label>
                <hr />
                Moto: <br /><textarea name="foto" rows="5" cols="50"></textarea>
                <hr />
                <input type="submit" name="submit" value="Submit">
                <input type="reset" name="reset" value="Reset">
            </form>

        </div>        

    </body>
</html>

Hasilnya:

form.html

– Buat file list.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\list.html

<!DOCTYPE html>
<html>
    <head>
        <title>List - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a>
        </div>

        <div class="content">

            <h1>List</h1>

            <!-- default type="disc" tidak ditulis juga gpp -->
            <ul type="disc">
                <li>Disc 1</li>
                <li>Disc 2</li>
                <li>Disc 3</li>
            </ul>
            
            <ul type="square">
                <li>square 1</li>
                <li>Square 2</li>
                <li>Square 3</li>
            </ul>
            
            <ul type="circle">
                <li>circle 1</li>
                <li>circle 2</li>
                <li>circle 3</li>
            </ul>
            
            <!-- default type="1" tidak ditolis juga gpp -->
            <ol type="1">
                <li>Angka 1</li>
                <li>Angka 2</li>
                <li>Angka 3</li>
            </ol>
            
            <ol type="I">
                <li>Numerik Uppercase 1</li>
                <li>Numerik Uppercase 2</li>
                <li>Numerik Uppercase 3</li>
            </ol>
            
            <ol type="i">
                <li>Numerik Lowercase 1</li>
                <li>Numerik Lowercase 2</li>
                <li>Numerik Lowercase 3</li>
            </ol>
            
            <ol type="A">
                <li>Abjad Uppercase 1</li>
                <li>Abjad Uppercase 2</li>
                <li>Abjad Uppercase 3</li>
            </ol>
            
            <ol type="a">
                <li>Abjad Lowercase 1</li>
                <li>Abjad Lowercase 2</li>
                <li>Abjad Lowercase 3</li>
            </ol>
            
        </div>        

    </body>
</html>

Hasilnya:

list.html

– Buat file gambar.html
Lokasi filenya seperti di bawah ini
C:\xampp\htdocs\belajar\gambar.html

<!DOCTYPE html>
<html>
    <head>
        <title>Gambar - webku.com</title>
    </head>
    <body>

        <div class="menu">
            <a href="index.html">Home</a> |
            <a href="typography.html">Typography</a> |
            <a href="table.html">Table</a> |
            <a href="form.html">Form</a> |
            <a href="list.html">List</a> |
            <a href="gambar.html">Gambar</a> 
        </div>

        <div class="content">

            <h1>Gambar</h1>
            
            <!-- ditampilkan apa adanya -->
            <img src = "https://image.freepik.com/free-psd/laptop-screen-mockup_171918-185.jpg" alt="Image" />
            <hr />
            
            <!-- ditampilkan dengan merubah ukuran -->
            <img src = "https://image.freepik.com/free-psd/laptop-screen-mockup_171918-185.jpg" alt = "Image" border="3" width="203" height="150" />
            <hr />

            <img src = "https://image.freepik.com/free-psd/laptop-screen-mockup_171918-185.jpg" alt = "Image" border="3" width="163" height="111" />
            <hr />

        </div>        

    </body>
</html>

Hasilnya:

gambar.html

Setelah semua kode di atas disimpan, silahkan buka browser dan ketikkan http://localhost/belajar atau http://localhost/belajar/index.html

Periksa, apakah semua berjalan dengan baik.

Saya yakin setelah kode-kode di atas diketik sendiri kemudian melihat hasilnya, Anda akan sedikit banyak memahami HTML.

Meski HTML terkesan mudah, namun tanpa mempelajarinya kedepan Anda akan bingung saat bercita-cita menjadi web developer.

Untuk memahami HTML, dua artikel ini insyaAllah sudah cukup, selanjutnya kita akan belajar CSS untuk memoles HTML kita.

Konsep dasar menghubungkan HTML dan CSS

Belajar mudah HTML, CSS, Javascript, PHP, MySQL
1. Pengantar – Memulai belajar web programming secara otodidak (part 1)
2. HTML Dasar – HTML dasar yang mudah sekali (part 2)
3. Tag HTML Penting – Tag HTML yang sering dipakai untuk membuat halaman website (part 3)
4. HTML CSS – Konsep dasar CSS dan cara menghubungkan HTML – CSS (part 4)
5. HTML Javascript – HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)
6. HTML – PHP – Konsep dasar PHP dan cara menghubungkan dengan HTML (part 6)
7. HTML CSS JS – PHP MySQL – Membuat CRUD dengan PHP MySQL HTML CSS JS (part 7)

Bagikan
rasupe

Recent Posts

Tombol back tutup modal bootstrap tanpa kembali ke halaman sebelumnya

Bismillaahirrohmaanirrohiim... Jika kita membuat aplikasi web base menggunakan bootstrap, saat user membuka modal, kadangkala mereka…

2 hours ago

Kode css yang berguna

Bismillaahirrohmaanirrohiim... Berikut ini kumpulan css yang berguna, untuk mengingat saja. Input atau button delay saat…

1 week ago

Grouping warna pada tabel dengan PHP

Bismillaahirrohmaanirrohiim... Berikut ini cara grouping warna baris pada tabel dengan PHP, dimana jika ada kode…

2 weeks ago

CMS Website Desain Interior – PHP MySQL

CMS (Content Management System) Web untuk Desain Interior adalah solusi lengkap untuk mempresentasikan bisnis desain…

4 weeks ago

Source code Template website sekolah dengan react js

Bismillaahirrohmaanirrohiim... Berikut ini source code yang dapat dimodifikasi untuk membuat front end website sekolah dengan…

2 months ago

Subdomain pada cyberpanel tidak dapat diakses

Bismillaahirrohmaanirrohiim... Jika domain dan sub domainnya berada dalam satu vps cyberpanel, maka seringkali jadi tidak…

2 months ago