Skip to main content

Apa Itu HTML ? Inilah Tutorial Lengkapnya

Untuk bisa membuat website sendiri kita harus belajar HTML, CSS, PHP, MySQL, dan lainnya. Nah ditutorial ini kita akan mempelajari apa itu HTML dan bagaimana cara penggunan kode-kode html. Jika kamu pemula artikel sangat cocok untuk dipelajari.

 

Apa itu HTML  ? dan Apa Fungsinya ?

HTML adalah bahasa markup standar yang digunakan untuk membuat sebuah halaman website yang memiliki fungsi untuk menampilkan informasi di Internet. Adapun informasi yang ditampilkan bisa berupa teks, gambar, suara, video dan lainnya.

Jadi apapun website yang kita lihat pasti awalnya dibangun menggunakan HTML. Menurut W3School :

  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML menggambarkan struktur halaman Web menggunakan markup
  • Elemen HTML adalah blok bangunan dari halaman HTML
  • Elemen HTML diwakili oleh tag
  • Tag HTML memberi label potongan konten seperti “judul”, “paragraf”, “tabel”, dan sebagainya
  • Browser tidak menampilkan tag HTML, namun gunakan untuk menampilkan konten halaman

HTML yang digunakan sekarang adalah HTML 5 yang memiliki berbagai fitur yang menarik. Contohnya : canvas, header, footer, time, audio dan video.

 


Baca Juga :

Belajar Android Studio Untuk Pemula 

Belajar Membuat Aplikasi Android Dengan Berbagai Contoh 


 

 Tools Yang Digunakan

  • Text Editor : yaitu software aplikasi yang digunakan untuk menulis kode-kode markup dan juga program. Contohnya : Notepad, Notepad ++, Sublime Text dan lainnya.
  • Web Browser : digunakan untuk membuka file html yang sudah dibuat pada text editor. Contohnya : Google Chrome, Mozilla Firefox, dan lainnya

 

Struktur Dasar HTML

Struktur dasar HTML memiliki susunan file seperti berikut :

<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
Isinya teks, gambar, atau apapun yang tampil di web 
</body>
</html>

Penjelasan 

  • File HTML diawali sebuah tag <html> dan ditutup dengan tag </html> 
  • Tag <head> … </head> merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag <title> … </title> dan tag <body>…</body>
  • Pada bagian tag <body> …</body> kita bisa menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang akan disampaikan melalui web.

Praktek 1

Untuk mengetahui bagaimana penggunaan HTML dalam proses pembuatan web. Silahkan praktekan langkah-langkah dibawah ini.

a. Buka Text Editor

Buka text editor yang terdapat pada komputer kamu. Disini saya menggunakan text editor Notepad (bawaan windows).

apa itu html
Text Editor Notepad

 

b. Tambakan kode-kode HTML 

Setelah Notepad terbuka tambahkan kode-kode HTML sederhana berikut ini :

<html>
<head>
<title> Test HTML </title>
</head> 
<body>
Selamat Belajar HTML </body>
</html>

Lalu save dengan nama file belajar.html, pada save as type pastikan menjadi All files jika sudah klik save.

Apa itu html
Menyimpan File HTML

 

Maka icon file belajar.html akan menjadi web browser default yang kita gunakan.

apa itu html
File HTML pada Desktop

 

Buka file tersebut maka hasilnya akan seperti dibawah ini.

apa itu html
Tampilan dari Struktur HTML

 

  1. Test html merupakan title dari tag <title> test html </title>
  2. Selamat Belajar html merupakan hasil dari tag <body > Selamat Belajar Html </body>

 

Properti Dokumen

Properti dokumen dalam html diatur melalui atribut-atribut yang berada pada tag <body>. Sebagai contoh adalah bila kita ingin memberikan warna pada background halaman, warna teks, link dan lainnya.

Pengaturan warna dalam html biasanya menggunakan kode RGB yang ditampilkan ke dalam nilai hexadesimal. Berikut ini adalah contoh kode warna yang bisa kita gunakan saat mendesain web menggunakan html.

  • Kode Hex : #0000FF, Nama Warna : Blue
  • Kode Hex : #8A2BE2, Nama Warna :  Blueviolet
  • Kode Hex : #A52A2A, Nama Warna :  Brown
  • Kode Hex : #DEB887, Nama Warna :  Burlywood
  • Kode Hex : #5F9EAD, Nama Warna :  Cadetblue

Berikut adalah beberapa atribut warna  elemen <body> yang sering digunakan saat membuat web :

  • Bgcolor : Digunakan untuk memberikan warna latar belakang. Defaultnya putih.
  • Text : Digunakan untuk memberikan warna teks. Defaultnya hitam.
  • Link : Digunakan untuk memberikan warna link dokumen. Defaultnya biru.

Praktek 2

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

<html>
<head>
 <title>
 Atribut Warna
 </title>
</head>
<body bgcolor="#FFFF00" text="#FF0000">
<H1> Ini adalah contoh penggunaan Atribut Warna </H1>
</body>
</html>

 

Maka hasilnya akan seperti gambar dibawah ini.

apa itu html
Penggunaan Atribut Warna

 

Penjelasan

  • Kode bgcolor =”#FFFF00″ digunakan untuk menampilkan background berwarna kuning
  • Kode text=”#FF0000″ digunakan untuk menampilkan teks berwarna merah
  • Kode h1 digunakan untuk membuat ukuran heading pada halaman web yang dibuat dengan html

 

Penggunaan Heading

Heading digunakan untuk pengaturan judul dan sub judul pada halaman web yang dibuat menggunakan HTML.  Tanpa panjang lebar langsung saja kita praktekan cara penggunaan heading pada HTML.

Praktek 3

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode html berikut pada notepad.

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

Jika sudah jangan lupa simpan. Kemudian hasilnya akan terlihat seperti gambar dibawah ini.

apa itu html
Penggunaan Heading

 

 

 

Format Teks pada HTML

Format teks pada html digunakan untuk membuat huruf tebal, miring, dan lain sebagainya.

Praktek 4

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

<html>
<head>
<title> Format Teks </title>
</head> 
<body>
<p>
<b> Menebalkan teks (bold)</b>
</p>

<p>
<i> Memiringkan teks (italic)</i>
</p>

<p>
<u> Memberi garis bawah (underline) <u/>
</p>

<p>
<del> Mencoret teks </del>
</p>


 </body>
</html>

Silahkan kamu simpan file tersebut. Maka tampilan akan seperti gambar berikut.

apa itu html
Pemformatan Teks

 

Tag Format Teks

Berikut ini adalah beberapa tag yang sering digunakan untuk format teks pada HTML.

  • <b> digunakan untuk teks tebal
  • <em> digunakan untuk teks menekankan
  • <i> digunakan untuk teks miring
  • <small> digunakan untuk teks kecil
  • <strong> digunakan untuk teks penting
  • <sub> digunakan untuk teks di bawah garis
  • <sup> digunakan untuk teks di atas garis
  • <ins> digunakan untuk teks sisipan
  • <del> digunakan untuk teks dicoret
  • <mark> digunakan untuk teks ditandai

 

Format Paragraf pada HTML

<p> merupakan tag yang digunakan pada HTML untuk membuat paragraf. Dibuka dengan tag <p> dan ditutup dengan tag </p>. 

 

Praktek 5 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

<html>
<head>
<title> Penggunaan Format Paragraf </title>
</head> 
<body>
<p>
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
</p>

<p>
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
</p>

<p>
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
Ini merupakan paragraf pada sebuah halaman web. Ini merupakan paragraf pada sebuah halaman web. 
</p>


 </body>
</html>


Jika sudah lihat hasilnya. Maka akan tampil seperti gambar dibawah ini.

Apa itu html
Format Paragraf pada HTML

 


Baca Juga :

50 Judul Skripsi Android dilengkapi Link Jurnal

100 Contoh Skripsi Sistem Informasi Berbasis web dan Jurnal


 

Pembuatan List 

List yaitu bagian teks yang berisi daftar menu/ item dari suatu kelompok tertentu. Contohnya daftar menu makanan dan harganya, daftar kategori buku, juga yang lainnya.

Pada HTML list dibagi menjadi 3, yaitu :

  • List Berurutan
  • List Tidak Berurutan
  • List Definisi

 

List Berurutan

Ini biasanya ditandai dengan nomor urutan tertentu. Biasanya menggunakan angka (1, 2, 3, dst ) atau menggunakan alpabet (a, b, c, dst).

List ini sering digunakan untuk item-item yang saling berhubungan satu sama lain. Contoh list berurutan yaitu :

Cara menyimpan file

  1. Klik save
  2. Beri nama file
  3. Klik Ok

 

Tag List Berurutan

Tag yang digunakan untuk membuat list berurutan adalah tag <ol> yang artinya ordered list berpasangan dengan </ol>. Masing-masing item di dalam daftar dibuat menggunakan tag <li> yang artinya list item ditutup dengan tag </li>. 

 

Praktek 6 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML berikut pada notepad.

<html>
<head>
<title> Pembuatan List </title>
</head> 
<body>
<h3> Daftar Makanan </h3>
<ol>
 <li> Nasi Goreng </li>
 <li> Mie Ayam </li>
 <li> Kwetiaw </li>
</ol>

</body>
</html>

 

Jika sudah disimpan dan dibuka tampilan akan seperti gambar berikut ini.

apa itu html
Pembuatan List Berurutan

 

Urutan default dari list berurutan yaitu 1, 2, 3 dst. Kita bisa menggunakan tipe lain untuk suatu list.

Tipe A : Digunakan untuk membuat list dengan karakter A, B, C, dst.

Tipe a : Digunakan untuk membuat list dengan karakter a, b, c, dst.

Tipe I : Digunakan untuk membuat list dengan karakter I, II, III, dst.

Tipe i : Digunakan untuk membuat list dengan karakter i, ii, iii, dst.

 

Supaya lebih jelas berikut contohnya.

<html>
<head>
<title> Pembuatan List </title>
</head> 
<body>
<h3> Daftar Makanan </h3>
<ol type="A">
 <li> Nasi Goreng </li>
 <li> Mie Ayam </li>
 <li> Kwetiaw </li>
</ol>

</body>
</html>

 

Maka hasilnya adalah sebagai berikut.

apa itu html
Pembuatan List Menggunakan Tipe

 

 

List Tidak Berurutan

List tidak berurtan biasanya digunakan pada list yang item-itemnya bisadiubah secara acak posisinya. List ini biasanya menggunakan simbol-simbol seperti kotak atau bulat (bullet). Contohnya :

Daftar Buku :

  • Matematika
  • Bahasa Inggris
  • Bahasa Indonesia

Daftar buku di atas, bisa kita ubah posisinya. Ini karena setiap item tidak memiliki satu sama lain berbeda dengan list berurutan yang saling berkaitan setiap item yang ditampilkannya.

Tag List Tidak Berurutan 

Tag yang digunakan pada  HTML  untuk membuat list tidak berurutan yaitu tag <ul> yang artinya (unordered list), berpasangan dengan tag </ul>. Sama seperti list berurutan setiap item yang ditampilkan harus menggunakan tag <li> … </li>.

Praktek 7 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode html berikut pada notepad.

<!DOCTYPE html>
<html>
<head>
 <title> List Tidak Berurutan</title>
</head>
<body>
 <h1> Daftar Buku Pelajaran </h1>
 <ul>
 <li> Matematika </li>
 <li> Bahasa Indonesia</li>
 <li> Bahasa Inggris</li>
 </ul>
</body>
</html>

Simpan file tersebut. Silahkan buka dan tampilan akan seperti gambar dibawah ini.

apa itu html
Penggunaan List Tidak Berurutan

 

Urutan default dari list tidak berurutan yaitu berbentuk bullet. Tipe lain yang bisa kita gunakan adalah :

Tipe Disk : Digunakan untuk membuat list dengan tanda bulatan hitam

Tipe Circle  : Digunakan untuk membuat list dengan tanda bulatan putih

Tipe Square  : Digunakan untuk membuat list dengan tanda kotak

 

Berikut contoh menggunakan tipe square pada list tidak berurutan.

<!DOCTYPE html>
<html>
<head>
 <title> List Tidak Berurutan</title>
</head>
<body>
 <h1> Daftar Buku Pelajaran </h1>
 <ul type="Square">
 <li> Matematika </li>
 <li> Bahasa Indonesia</li>
 <li> Bahasa Inggris</li>
 </ul>

</body>
</html>

 

Maka tanda bulatan hitam pada contoh diawal akan berubah menjadi bulatan kotak. Itu dikarenakan penambahan type=square pada tag <ul>.

apa itu html
List Tidak Berurutan Menggunakan Tipe Square

List Kombinasi 

Coba perhatikan list dibawah ini.

Daftar Mahasiswa Per Jurusan :

1. Sistem Informasi

  • Ayu
  • Rizki
  • Dani

2. Teknik Informatika

  • Ratna
  • Anisa
  • Rendi

List di atas merupakan gabungan dari pada list berurutan dan tidak berurutan. Untuk membuat list seperti di atas pada HTML kita cukup menggabungkan tag <ol> dengan tag <ul>.

 

Praktek 8 

Lakukan langkah-langkah seperti pada praktek 1. Masukan kode-kode HTML  berikut pada notepad.

<!DOCTYPE html>
<html>
<head>
 <title> List Kombinasi </title>
</head>
<body>
 <h1> Daftar Mahasiswa Per Jurusan </h1>
 <ol> 
 <li> Sistem Informasi </li>
 <ul>
 <li> Ayu </li>
 <li> Rizki </li>
 <li> Dani </li>
 </ul>

<li> Sistem Informasi </li>
 <ul>
 <li> Ayu </li>
 <li> Rizki </li>
 <li> Dani </li>
 </ul>
 </ol>
 
</body>
</html>

 

Jika sudah silahkan simpan file HTML tersebut. Maka hasilnya seperti gambar di bawah ini.

apa itu html
Penggunaan List Kombinasi

 

Untuk membuat list dengan urutan tidak dimulai dari 1/ a, kita bisa menambahkan start=”2″ pada elemen tag <ol>.

Misalnya, angka dimulai dari 50. Maka kode-kode htmlnya adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
 <title> List Kombinasi </title>
</head>
<body>
 <h1> Daftar Mahasiswa Per Jurusan </h1>
 <ol start="50"> 
 
 <li> Ayu </li>
 <li> Rizki </li>
 <li> Dani </li>
 
 </ol>
 
</body>
</html>

 

Maka hasilnya seperti gambar di bawah ini.

apa itu html
Penggunaan Kode Start pada List

 

Dari gambar diatas nomor dimulai dari 50. Lalu bagaimana jika kita ingin memulainya dengan huruf ? berikut contohnya.

<!DOCTYPE html>
<html>
<head>
 <title> List Kombinasi </title>
</head>
<body>
 <h1> Daftar Mahasiswa </h1>
 <ol type="A" start="17"> 
 
 <li> Ayu </li>
 <li> Rizki </li>
 <li> Dani </li>
 
 </ol>
 
</body>
</html>

Maka hasilnya yaitu seperti gambar berikut.

apa itu html
Penggunaan Start dengan Huruf

 


Baca Juga : 

Belajar React Native Untuk Pemula

Belajar Kotlin Android Untuk Pemula


Kesimpulan dan Latihan 

Sebagai latihan dari keseluruhan materi struktur HTML sampai dengan pembuatan list. Cobalah pahami kode-kode HTML berikut ini.

<!DOCTYPE html>
<html>
<head>
 <title> Kesimpulan </title>
</head>
<body bgcolor="lightblue" >
 <h1 > Membuat Website </h1>

<p> Website merupakan halaman yang bisa kita lihat menggunakan web browser </p>

<h2> Macam-macam Website</h2>

<p>
 <ol>
 <li> Website Statis </li>
 <li> Website Dinamis </li>
 </ol>

</p>

<h3> Ciri-ciri Website Statis dan Dinamis </h3>
<p>
 <ol>
 <li> Website Statis </li>
 <ul>
 <li> Tidak adanya interaksi antara pengguna dan web</li>
 <li> Biasanya dibangun hanya menggunakan html </li>
 <li> Tidak adanya database</li>
 </ul>


 <li> Website Dinamis </li>
 <ul>
 <li> Adanya interaksi, contoh: melalui komentar atau lainnya</li>
 <li> Adanya Database untuk menyimpan data dari interaksi yang terjadi </li>
 <li> Sering diupdate </li>
 </ul>
 </ol>
</p>

<p>
 Itulah pengertian <b> Website </b> dan juga <i> Macam-macam Website </i>. Untuk lebih jelasnya kamu bisa membaca artikel atau buku mengenai <u> Website</u>
</p>
 
</body>
</html>

Dari kode-kode HTML di atas terdapat semua tag yang kita pelajari dari awal sampai akhir. Jika sudah kamu pelajari hasilnya adalah sebagai berikut.

apa itu html
Latihan Keseluruhan Materi

 

Sampai disini apakah kamu sudah paham mengenai apa itu HTML ? dan bagaimana penggunaannya. Jika kamu mengalami kesulitan kamu bisa berkomentar dibawah ini. Jangan lupa share ya, semoga bermanfaat dan sampai jumpa ditutorial berikutnya.


Referensi :

  • Wikipedia
  • W3school
  • Buku Pemrograman Web

Freelancer web and mobile developement, blogger, and teacher.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.