Belajar HTML Dasar Dengan Mudah
Apa itu HTML ?
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.
Nah untuk bisa membuat website sendiri kita harus belajar HTML, CSS, PHP, MySQL, dan lainnya. Di tutorial ini kita akan mempelajari apa itu HTML dan bagaimana cara penggunaan kode - kode html.
Tools Yang Digunakan
- Text Editor : Yaitu aplikasi yang digunakan untuk menulis kode - kode program pada html. 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
HTML memiliki struktur dasar susunan file seperti berikut :
<html> <head> <title> Judul Halaman </title> </head> <body> Isi teks, gambar, atau apapun yang akan ditampilkan pada 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.
Latihan 1
Untuk mengetahui bagaimana penggunaan HTML dalam proses pembuatan web. Silahkan ikuti langkah-langkah dibawah ini.
1. Buka Text Editor
Buka text editor yang terdapat pada komputer kamu. Disini saya menggunakan text editor Notepad (bawaan windows).
2. Masukkan kode-kode HTML
 |
| Text Editor Notepad |
Setelah Notepad terbuka tambahkan kode-kode HTML sederhana berikut ini :
<html> <head> <title> Latihan HTML </title> </head> <body> Selamat Belajar HTML di Apapuncara.com </body> </html>Lalu save dengan nama file latihan.html, pada save as type pastikan menjadi All files jika sudah klik save.
 |
| Simpan File HTML |
Maka icon file belajar.html akan menjadi web browser default yang kita gunakan.
 |
| File HTML |
Buka file tersebut maka hasilnya akan seperti dibawah ini.
 |
| Tampilan HTML |
Penjelasan :
- Latihan html merupakan title dari tag <title> Latihan HTML </title>
- Selamat Belajar HTML di Apapuncara.com merupakan hasil dari tag <body > Selamat Belajar HTML di Apapuncara.com </body>
Properti HTML
Properti pada html diatur melalui atribut-atribut yang berada pada tag <body>. Sebagai contoh adalah jika 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 adalah beberapa contoh kode warna yang bisa kita gunakan saat mendesain web menggunakan html.
- 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.
Latihan 2
Lakukan langkah-langkah seperti pada Latihan 1. Masukan kode-kode HTML berikut pada notepad.
<html> <head> <title> Atribut Warna </title> </head> <body bgcolor="#7FFF00" text="#FF0000"> <H1> ApapunCara.com </H1> Ini adalah contoh penggunaan Atribut Warna </body> </html>
Maka hasilnya akan seperti gambar dibawah ini.
 |
| Penggunaan Attribut Warna |
Penjelasan :
- Kode bgcolor = "#7FFF00" digunakan untuk menampilkan background berwarna hijau muda
- 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.
Latihan 3
Lakukan langkah-langkah seperti pada latihan 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.
Format Text HTML
Format teks pada html digunakan untuk membuat huruf tebal, miring, dan lain sebagainya.
Latihan 4
Lakukan langkah-langkah seperti pada latihan 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.
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>.
Latihan 5
Lakukan langkah-langkah seperti pada latihan 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.
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 :
Daftar Menu Makanan :
- Soto
- Rawon
- Pecel
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>.
Latihan 6
Lakukan langkah-langkah seperti pada latihan 1. Masukan kode-kode HTML berikut pada notepad.
<html> <head> <title> Pembuatan List </title> </head> <body> <h3> Daftar Menu Makanan </h3> <ol> <li> Soto </li> <li> Rawon </li> <li> Pecel </li> </ol> </body> </html>
Jika sudah disimpan dan dibuka tampilan akan seperti gambar berikut ini.
Urutan default dari list berurutan yaitu 1, 2, 3 dst. Kita bisa menggunakan tipe lain untuk suatu list seperti contoh dibawah ini:
<ol type="A"> <li> Nasi Goreng </li> <li> Mie Ayam </li> <li> Kwetiaw </li> </ol>
Type A : Digunakan untuk membuat list dengan karakter A, B, C, dst.
Type a : Digunakan untuk membuat list dengan karakter a, b, c, dst.
Type I : Digunakan untuk membuat list dengan karakter I, II, III, dst.
Type i : Digunakan untuk membuat list dengan karakter i, ii, iii, dst.
List Tidak Berurutan
List tidak berurutan biasanya digunakan pada list yang item-itemnya bisa diubah secara acak posisinya. List ini biasanya menggunakan simbol-simbol seperti kotak atau bulat (bullet). Contohnya:
Daftar Jenis Kendaraan :
- Honda
- Yamaha
- Suzuki
Daftar kendaraan di atas, bisa kita ubah posisinya. Karena setiap item berbeda dengan list berurutan yang satu sama lain 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>.
Latihan 7
Lakukan langkah-langkah seperti pada latihan 1. Masukan kode-kode HTML berikut pada notepad.
<html> <head> <title> List Tidak Berurutan</title> </head> <body> <h1> Daftar Jenis Kendaraan </h1> <ul> <li> Honda </li> <li> Yamaha </li> <li> Suzuki </li> </ul> </body> </html>
Simpan file tersebut. Silahkan buka dan tampilan akan seperti gambar dibawah ini.
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.
<h1> Daftar Buku Pelajaran </h1> <ul type="Square"> <li> Matematika </li> <li> Bahasa Indonesia</li> <li> Bahasa Inggris</li> </ul>
Mudah kan belajar HTML, apakah kamu sudah paham mengenai penggunaan HTML ?. Jika kamu mengalami kesulitan kamu bisa berkomentar dibawah ini. Terimakasih Semoga bermanfaat.
0 Response to "Belajar HTML Dasar Dengan Mudah"
Post a Comment