Belajar Dasar HTML untuk Pemula (Lengkap)
Di Posting Oleh : wandi
Kategori : HTML Programming

HTML adalah bahasa pemrograman yang digunakan untuk membuat web. HTML sangat tepat sekali untuk mengawali anda untuk menjadi seorang progammer web.

HTML itu sendiri adalah singkatan dari Hyper Markup Text Language yang diciptakan oleh bapak Tim Berners-lee. Dan kerennya lagi seorang progammer web mendesain tampilan web hanya dengan mengetikkan baris kode bahasa pemrograman. Magic.!.

Sesuai dengan judulnya, silahkan lanjut kebawah.

Apa yang dibutuhkan.?

Kemauan untuk belajar
Sebuah program text editor untuk tempat penulisan kode (Coding).

Anda bisa menggunakan notepad yang tersedia di windows. tapi saya sarankan untuk menggunakan program yang didesain khusus untuk koding. saya biasa menggunakan Sublime Text, atau text editor lainnya.

Baca : 5 daftar text editor yang mudah digunakan

Materi:

Menyiapkan Project
Struktur Dasar HTML
Tipografi
List / Daftar
Tabel
Menyisipkan Gambar

Menyiapkan Project

Biasanya para programmer web membuat folder tersendiri untuk 1 proyek web, 1 level didalam folder tersebut dinamakan dengan root

Buat satu folder untuk project pertama anda.
Setelah membuat folder projectnya, buka menggunakan notepad atau sublime text
Buat satu file dengan nama terserah namun berekstensi .html.
contoh : index.html.

Struktur Dasar HTML

Didalam bahasa pemrograman HTML, sistem penulisan kode memakai sistem buka tutup tag.
misal, tag <html> ditutup dengan </html> , tag <head> ditutup dengan </head> dan sebagainya.

Secara umum, struktur html sederhana seperti berikut, Tuliskan Kode dibawah pada text editor anda:

<html>
<head>
isinya head
</head>
<body>
isinya body
</body>
</html>

Maka kode diatas dapat diartikan seperti gambar dibawah

Didalam tag <head>, berisi kumpulan pendukung dokumen, seperti judul tab <title>, memanggil file css <link>, dan bahkan memuat file javascript <script>.

Sementara semua yang ada didalam tag <body>, akan tampil didalam halaman. Ada banyak sekali tag yang dapat anda gunakan.

Coba ketikkan kode seperti dibawah dan jalankan di browser:

<html>
  <head>
    <title>Ini Judulnya</title>
  </head>
  <body>
    Ini yang tampil di web browser
  </body>
</html>

Penjelasan

Teks yang ada pada <body> muncul di browser,
sementara pada tag <head> tidak muncul di halaman browser.
Namun <title> tampil sebagai nama tab karena memang sudah menjadi fungsinya

Tipografi

Tipografi singkatnya adalah model penulisan. Pada HTML sendiri sudah disediakan tag yang menangani desain tipografi, seperti: Heading, Bold, Italic, Underline, dan masih banyak yang lainnya. Mari kita bahas

Heading <h1>, <h2>, .... <h6>

Heading adalah tulisan besar yang memfokuskan kalimat didalamnya. Biasa digunakan untuk nama website, judul dan lain sebagainya.

Contoh

<html>
  <head>
    <title>Belajar html</title>
  </head>
  <body>
    <h1>Ini contoh Heading 1</h1>
    <h2>Ini contoh Heading 2</h2>
    <h3>Ini contoh Heading 3</h3>
    <h4>Ini contoh Heading 4</h4>
    <h5>Ini contoh Heading 5</h5>
    <h6>Ini contoh Heading 6</h6>
  </body>
</html>

Hasil Output

Ini contoh Heading 1

Ini contoh Heading 2

Ini contoh Heading 3

Ini contoh Heading 4

Ini contoh Heading 5

Ini contoh Heading 6

Cetak huruf (tebal, miring, underline dan coretan)

Pada saat kita mengetikkan dokumen pada microsoft word (misalnya). Kita tak pernah luput dari model huruf ini. Yaitu cetak tebal, miring dan garis bawah, Sesekali menggunakan Strike / coretan.

Kita juga dapat menggunakannya pada html.

tag <b> untuk mencetak huruf tebal

tag <u> untuk mencetak huruf dengan garis bawah

tag <i> untuk mencetak huruf miring

tag <ss> untuk mencetak huruf seperti dicoret

berikut demonya

<html>
    <head>
        <title></title>
    </head>
    <body>
        <b>Ini huruf tebal</b><br>
        <u>Ini huruf bergaris bawah</u><br>
        <i>Ini huruf miring</i><br>
        <ss>Ini huruf yang dicoret</ss><br>
    </body>
</html>

Hasil Output

Ini huruf tebal
Ini huruf bergaris bawah
Ini huruf miring
Ini huruf yang dicoret

List / Daftar

Daftar item tanpa nomor <ul>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <ul>
            <li>Urutan daftar 1</li>
            <li>Urutan daftar 2</li>
            <li>Urutan daftar 3</li>
            <li>Urutan daftar 4</li>
            <li>Urutan daftar 5</li>
        </ul>
    </body>
</html>

Hasil Output

Urutan daftar 1
Urutan daftar 2
Urutan daftar 3
Urutan daftar 4
Urutan daftar 5

Daftar item dengan nomor <ol>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <ol>
            <li>Urutan daftar 1</li>
            <li>Urutan daftar 2</li>
            <li>Urutan daftar 3</li>
            <li>Urutan daftar 4</li>
            <li>Urutan daftar 5</li>
        </ol>
    </body>
</html>

Hasil Output

Urutan daftar 1
Urutan daftar 2
Urutan daftar 3
Urutan daftar 4
Urutan daftar 5

Deskripsi Item

<html>
    <head>
        <title></title>
    </head>
    <body>
        <dl>
            <dt>Mouse</dt>
            <dd>Inputan yang digunakan komputer sebagai penggerak kursor</dd>
        </dl>
        <dl>
            <dt>LCD</dt>
            <dd>Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight</dd>
        </dl>
        <dl>
            <dt>Android</dt>
            <dd>Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler</dd>
        </dl>
    </body>
</html>

Hasil Output

Mouse: Inputan yang digunakan komputer sebagai penggerak kursor

LCD: Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight

Android: Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler

Tabel

Tabel standar

Untuk membuat tabel pada html, kita perlu mengetahui struktur tabel yang diterapkan pada html. Tabel HTML menggunakan 3 tag utama yaitu <table>, <tr>, <td>
<table> adalah tag yang mewakili seluruh komponen tabel
<tr> adalah baris dari suatu tabel
<td> adalah cell dari suatu baris.
<th> adalah cell untuk header, perbedaannya dengan td adalah pada th tulisan lebih tebal.

pada kondisi bawaan, tabel tidak memiliki border / garis tepi. Sehingga kita harus menambahkan atribut pada tag <table> berupa border="1" (1 berarti memiliki ketebalan garis level 1)
Silahkan coba kode berikut:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Alamat</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Ahmad</td>
                <td>Jl. Jakarta</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi</td>
                <td>Jl. Surabaya</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ahmad</td>
                <td>Jl. Semarang</td>
            </tr>
        </table>
    </body>
</html>

Hasil Output

No	Nama	Alamat
1	Ahmad	Jl. Jakarta
2	Budi	Jl. Surabaya
3	Ahmad	Jl. Semarang

Tabel Gabungan

untuk menggabung cell, anda dapat menggunakan
rowspan="jumlah_baris" : untuk menggabungkan baris
colspan="jumlah_kolom : untuk menggabungkan kolom

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th rowspan="2">No</th>
                <th rowspan="2">Nama</th>
                <th rowspan="2">Alamat</th>
                <th colspan="2">Orang Tua</th>
            </tr>
            <tr>
                <th>Ayah</th>
                <th>Ibu</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Ahmad</td>
                <td>Jl. Jakarta</td>
                <td>Adi</td>
                <td>Rani</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Budi</td>
                <td>Jl. Surabaya</td>
                <td>Saputra</td>
                <td>Dinda Ayu</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ahmad</td>
                <td>Jl. Semarang</td>
                <td>Saefudin</td>
                <td>Rohmah</td>
            </tr>
        </table>
    </body>
</html>

Hasil Output

No	Nama	Alamat	Orang Tua
No	Nama	Alamat	Ayah	Ibu
1	Ahmad	Jl. Jakarta	Adi	Rani
2	Budi	Jl. Surabaya	Saputra	Dinda Ayu
3	Ahmad	Jl. Semarang	Saefudin	Rohmah

Menyisipkan Gambar

Untuk menyisipkan gambar, tag yang digunakan adalah

<img src="alamat_gambar">

Pada alamat gambar, anda dapat memberikan alamat di internet (komputer harus terkoneksi internet) ataupun gambar lokal yang ada dalam komputer anda.

Pada gambar lokal, gambar harus satu folder dengan file html, sehingga menjadi
<img src="gambar.png">. Atau anda dapat menyimpan gambar didalam folder lebih dalam misal
<img src="images/gambar.png".
Jangan lupa untuk memberikan ekstensi file seperti png, jpeg, bmp dan lain sebagainya pada alamat

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h2>Dibawah adalah gambar cover dari artikel ini</h2>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbb-qRI-5y5fzn4VLHTuur_mBBEIiZEnkv7FbFhRs32h0xEty7hVdwJk-JqFamgjTjE-Uf1c9HiD1JdEdxEib1FBNt9mQtaJgQBKJgf3P75Q4ikJMvT7TONNbavLAo1O-bjnhVcawveA/s400/Belajar.jpg">
    </body>
</html>

Hasil Output