Belajar HTML : Panduan Tutorial Lengkap Dari Dasar

Penulis : Zulfikar Kategori : Belajar HTML

Belajar Html

Langkah awal untuk bisa membuat sebuah website sendiri adalah dengan belajar html.

Di sini kita akan belajar html langkah demi langkah dari dasar, tutorial ini di buat berseri agar mudah di pahami untuk pemula.

Umumnya saat ini untuk membuat website banyak yang menggunakan aplikasi seperti CMS (Content Management System) salah satunya yang terkenal adalah wordpress.

Memang membuat website menggunakan cms atau aplikasi itu mudah dan cepat, tetapi kekurangan nya yaitu keterbatasan pada aplikasi cms itu sendiri.

Sebagai contoh keterbatasan tampilan website nya tergantung kepada template / theme yang di gunakan.

Lalu juga untuk fungsi website nya terbatas kepada dukungan plugin aplikasi cms nya.

Jika anda ingin membuat website yang bebas tanpa kerterbatasan aplikasi cms maka langkah awal nya adalah belajar html.

Apa Itu HTML ?

HTML singkatan dari Hyper Text Markup Language.

Di buat oleh Tim Berners-Lee, Robert Cailliau, dan tim nya pada tahun 1989.

Sesuai dengan kepanjangannya html adalah bahasa markup untuk membuat kerangka dasar dari sebuah website.

Jadi website yang bertebaran di internet kerangka dasarnya di buat dengan html.

Jika kamu masih bingung anggap lah html itu seperti menu yang sering kita gunakan di Aplikasi Word Processor seperti Microsoft Word, Open Office Writer atau Libre Office.

Di dalam aplikasi Word Processor kita sering menggunakan menu Bold untuk menebalkan text, Underline untuk memberi garis bawah pada text atau Italic untuk memiringkan text.

Selain itu layout dasar sebuah website juga di buat dengan html.

Persiapan Yang Dibutuhkan

Tidak seperti bahasa pemrograman php, untuk belajar html tidak membutuhkan aplikasi web server.

Syntax Html dapat langsung di buka melalui web browser.

Beberapa web browser yang banyak digunakan saat ini :

• Google Chrome
• Mozilla Firefox
• Opera

Oleh karena itu persiapan yang dibutuhkan untuk memulai belajar html cukup dua aplikasi :

• Web Browser
• Text Editor

Untuk text editor kamu bisa menggunakan notepad bawaan dari operating system windows.

Web Browser

Web browser merupakan aplikasi yang digunakan untuk membuka sebuah halaman website, selain website yang berada di internet browser juga bisa digunakan untuk membuka sebuah website yang berada di komputer lokal.

Untuk membuka halaman html di web browser pada umumnya cuku double klik file html nya, atau bisa juga dengan melakukan klik kanan – lalu pilih open with – pilih web browser yang akan di gunakan.

Notepad++

Tapi untuk tahap belajar tidak saya sarankan, karena fitur nya yang sangat minim.

Aplikasi Text Editor yang saya sarankan bisa menggunakan Notepad++ karena fitur nya membantu kita dalam memahami bahasa markup html.

Diantaranya fitur Syntax highlighting yang membedakan warna text berdasarkan tipenya.

Lalu fitur autocomplete yang membantu kita menulis bahasa markup html dengan cepat karena cukup dengan mengetikkan beberapa text awal dari sebuah markup html maka akan muncul saran dari beberapa markup secara lengkap.

Notepad++ dapat di download dari situs resminya : Notepad plus plus

Untuk instalasi nya cukup mudah seperti biasanya hanya tinggal klik next dan terakhir finish.

Atom

Text Editor atau Source Code Editor lainnya yang  lebih power full dari Notepad ++ adalah Atom.

Atom memiliki tema berwarna gelap yang tidak membuat mata cepat lelah, sehingga bisa berlama-lama di depan layar monitor.

Atom Text Editor bisa di download dari situs resminya : Atom.io

Cara Menulis Markup Html

Menu menu yang biasa kita gunakan di aplikasi word processor, di dalam bahasa markup html di representasikan ke dalam elemen elemen html yang penulisannya menggunakan tag html.

Seperti :

• Bold menggunakan tag <b>
• Heading menggunakan tag <h1>
• Paragraf menggunakan tag <p>

Html menggunakan tag pembuka dan tag penutup, sebagai contoh untuk menampilkan kata yang di cetak tebal di browser menggunakan tag Bold <b> :

<b>Text Ini Di cetak Tebal</b>

Di atas adalah contoh penggunaan salah satu dari tag markup html yaitu <b> (Bold).

Html mempunyai standar dasar format penulisan seperti contoh di bawah ini :

<!DOCTYPE html>
<html>
 <head>
   <title>Ini Judul Website</title>
 </head>
 <body>
  <h1>Ini Heading</h1>
  <p>Ini paragraf</p>
 </body>
</html>

Markup di atas di awali oleh tag <html> dan di akhiri oleh tag </html>, tag <!DOCTYPE html> memberikan informasi ke pada browser  bahwa halaman web nya merupakan halaman html dan browser harus merender nya.

Isi dari tag <head> tidak akan di tampilkan di browser karena tag <head> berisi metadata atau informasi tambahan tentang website nya, Hanya text yang berada dalam tag <title> akan muncul di tab web browser.

Di tag <head> biasanya juga di gunakan untuk menyisipkan link file css dan java script.

Sedangkan Halaman Website yang di render dan tampil di browser seperti website www.warungprogram.com ini berada di dalam tag <body>.

Maka dari contoh Markup Html di atas yang akan muncul di browser adalah text “Ini Heading” dan “Ini Paragraf”.

Untuk kalimat atau text yang panjang di html bisa menggunakan tag <p> (Paragraf) sedangkan untuk Judul di dalam html disediakan tag heading <h1> <h2> <h3> <h4> <h5> <h6> text yang terbesar di mulai dari tag <h1> lalu semakin kecil untuk tag berikut nya <h2> dan seterusnya.

Silahkan copy markup html diatas lalu paste ke dalam notepad ++ lalu save ke dalam format all files -> html (.html).

Untuk pertemuan pertama belajar html ini saya rasa cukup, silahkan di pelajari dan di pahami dahulu. Jika sudah paham silahkan lanjut ke tutorial selanjutnya.

Di tutorial selanjutnya kita akan belajar lebih dalam tentang element element html.