Panduan Dasar untuk Belajar HTML

HTML adalah singkatan dari Hypertext Markup Language. Ini adalah bahasa pemrograman yang digunakan browser web untuk menafsirkan dan menampilkan halaman web. Kode dalam HTML dapat digunakan untuk memformat teks, membuat tabel, menambahkan gambar, menautkan halaman bersama-sama pada peta situs atau sistem menu dan menyediakan opsi lain yang serupa. Panduan ini akan berfokus pada mempelajari cara menulis kode html yang sederhana.

 

Apa itu HTML dan mengapa saya harus mempelajarinya?

Apa kepanjangan dari HTML? HyperText Markup Language. Singkatnya, ini adalah bahasa yang digunakan untuk merancang halaman web. Penggunaan dasar HTML akan memungkinkan Anda untuk membuat situs web Anda sendiri dengan nama domain yang dapat Anda pilih (misalnya www.mywebsite.com) dan menghosting situs tersebut di server internet sehingga orang lain dapat melihat situs web Anda.

Anda juga dapat menggunakan HTML untuk hal-hal lain seperti membuat dokumen Anda sendiri atau mempelajari cara membuat aplikasi web. Html juga biasa digunakan untuk membuat grafik sederhana dan bahkan mempelajari javascript (yang memungkinkan Anda melakukan hal-hal seperti membuat tombol interaktif). Internet tidak akan seperti sekarang ini tanpa menggunakan html. Sederhananya, belajar html sekarang dapat membantu karir atau hobi Anda di masa depan.

Cara menggunakan editor teks untuk belajar html

Ada banyak program editor teks yang dapat Anda unduh secara online gratis, tetapi yang paling mudah digunakan adalah notepad++. Jika Anda memiliki sistem operasi berbasis windows maka Anda sudah dapat memiliki salinan perangkat lunak ini di komputer Anda. Perangkat lunak ini sangat sederhana dan akan memungkinkan Anda untuk melihat kode html yang Anda tulis (yang berguna dalam pembelajaran) dan juga akan secara otomatis menyimpan apa yang telah Anda tulis sehingga jika komputer Anda mati tiba-tiba, Anda dapat kembali ke tempat terakhir Anda bekerja.

 

Tag dasar dan cara menggunakannya

Bagian ini tidak lengkap dan tidak mencakup setiap tag. Anda dapat menemukan daftar lengkap tag html pada tutorial belajar html yang lebih lengkap, tetapi untuk mempelajari dasar-dasarnya, Anda hanya perlu membaca beberapa tag yang akan diterangkan di bawah ini.

 

1. Tag Judul (H1, H2, H3 )

Hal pertama yang perlu Anda pelajari adalah cara menggunakan tag heading. Tag heading digunakan untuk membuat heading dan sub-heading pada halaman web. Mereka secara otomatis membawa ukuran teks apapun menjadi muncul lebih besar seperti yang ditunjukkan pada contoh di bawah ini:

Perhatian : Tanda -  pada awal setiap tag hanya untuk mencegah tulisan ini menampilkan hasil format tag html, tanda tersebut sebenarnya tidak perlu ditambahkan.

 

<-h1>Ini adalah judul<-/h1>

<-h2>Ini adalah sub-judul<-h2>

Tag digunakan sebagai berikut: <-h1> untuk heading dan <-h2> untuk sub-heading. Dalam html Anda dapat memiliki beberapa tag heading pada baris yang sama, tetapi yang terbaik adalah hanya memiliki satu tag per baris.

 

2. Daftar berurutan : (ol) dan Daftar tidak berurutan : (ul)

Tag yang sangat umum dalam html adalah daftar terurut. Ini digunakan untuk membuat daftar seperti di bawah ini:

1. Item pertama

2. Barang Kedua

3. Item ketiga

Anda dapat membuat daftar tidak berurutan (juga disebut daftar berpoin).

 

3. Tag kutipan: (kutipan) dan Line Break : (br)

Terkadang berguna untuk menempatkan teks dalam kotak kutipan sehingga Anda dapat membuat bagian tertentu menonjol dari teks lain di halaman Anda. Anda mungkin juga hanya menginginkan satu baris teks di halaman Anda. Di sinilah tag pemisah baris masuk. Kode untuk kotak kutipan adalah sebagai berikut:

<-quote>Ini kutipan saya<-/quote>

Sedangkan tag untuk memisahkan baris teks dengan baris teks lain adalah <-br/>.

 

4. Hyperlink: (a) dan (href)

Hyperlink sangat berguna untuk dimiliki di halaman web Anda, dan mempelajari cara membuatnya sangat penting. Hyperlink digunakan untuk menghubungkan kata atau frasa di halaman web Anda ke halaman atau file html yang lain. Misalnya, jika Anda menginginkan tautan yang bertuliskan "Google" yang akan mengarah ke beranda Google, Anda dapat melakukan ini:

<-a href="http://google.com">Google<-/a>

Atau jika Anda memiliki gambar eksternal di halaman web, Anda mungkin ingin menautkannya melalui halaman html Anda. Dalam hal ini kode Anda akan mirip dengan ini (dengan asumsi Anda memiliki gambar bernama myimage.jpg pada server www.yoursite.com):

<-a href="http://www.yoursite.com/myimage.jpg">klik di sini<-/a>

 

5. Font dan ukuran

Mengubah tampilan teks adalah poin pembelajaran penting lainnya untuk mempelajari html. Untuk mengubah font Anda cukup menggunakan: <-font color="blue">Teks di sini<-/font> untuk mengubah teks dengan warna yang berbeda, atau untuk ubah ukurannya gunakan kode sebagai berikut: <-font size="5">teks di sini<-/font>.

 

Belajar lebih lanjut

Ada banyak tutorial pembelajaran online untuk mempelajari html dan setelah Anda memiliki dasar-dasarnya, saya sarankan Anda melihat W3Schools atau tutorial belajar html dari Nextgen. Satu hal yang perlu diperhatikan adalah belajar html pada awalnya bisa membuat frustasi, jadi jika tidak bertahan setelah beberapa hari, jangan terlalu berkecil hati. Terus belajar dan pada titik tertentu maka Anda akan dapat memahaminya secara utuh. Selamat belajar html!