Latihan Dasar HTML

Untuk membuat sebuah dokumen HTML anda dapat menggunakan texteditor seperti notepad, notepad++, Dreamweaver, Sublime atau Atom. Simpanlah dokumen tersebut dengan format “.html”, contoh “latihan.html” (tanpa tanda petik).

1. Body

Elemen body dapat diartikan sebuah wadah suatu halaman web yang nantinya akan ditampilkan pada browser.


<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body bgcolor="yellow">
    Belajar HTML itu menyenangkan.
  </body>
</html>

Atribut “bgcolor” digunakan untuk merubah warna latar belakang halaman. Anda juga dapat menggunakan sebuah gambar/foto sebagai latarnya dengan menggunakan atribut “background”.


<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body background="megamendung.png">
    Belajar HTML itu menyenangkan.
  </body>
</html>

Tutorial html mengubah background dengan gambar

Catatan:
Taruh file gambar satu folder dengan file HTML.

2. Heading

Heading adalah tulisan yang biasa digunakan untuk sebuah judul bercetak tebal dan besar.


<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5>
    <h6>Heading Level 6</h6>
  </body>
</html>

3. Paragraf

Untuk membuat sebuah paragraf dapat menggunakan tag yang diawali tag <p> diikuti isi pagraf dan diakhiri dengan tag </p>. Untuk mengatur posisi paragraf anda bisa menggunakan atribut “align” diikuti posisi yang diinginkan. Untuk berganti baris dalam paragraf anda bisa menggunakan tag <br>.


<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <p align="left">
      Pengertian HTML (Hyper Text Markup Language) dikutip dari wikipedia adalah
      sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, <br>
      menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan
      pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII
      agar dapat menghasilkan tampilan wujud yang terintegerasi.
    </p>

    <p align="right">
      Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan
      disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
    </p>

    <p align="center">
      Pengertian HTML (Hyper Text Markup Language) dikutip dari wikipedia adalah
      sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web,
      menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan
      pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII
      agar dapat menghasilkan tampilan wujud yang terintegerasi.
    </p>

    <p align="justify">
      Pengertian HTML (Hyper Text Markup Language) dikutip dari wikipedia adalah
      sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web,
      menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan
      pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII
      agar dapat menghasilkan tampilan wujud yang terintegerasi.
    </p>
  </body>
</html>

4. Link

Link adalah koneksi atau sambungan dari sebuah sumber ke sumber yang lain. Untuk membuat sebuah link bisa menggunakan tag <a>. Dalam contoh ini kita akan membuat sebuah tulisan menjadi sebuah link dalam artian tulisan tersebut bisa diklik dan akan mengarah ke halaman lain.


<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <a href="http://www.facebook.com">Facebook</a>
  </body>
</html>

Tulisan “facebook” jika diklik maka halaman akan berpindah ke halaman web www.facebook.com. Anda dapat menentukan halaman tujuan dengan mengisi atribut “href”.

Catatan:
Tag <a> juga dapat digunakan pada komponen lain seperti gambar dengan cara menaruh komponen tersebut diantara tag <a> </a>.