www.WarungProgram.com

Tempat Belajar Bahasa Pemrograman Dari Dasar


Belajar HTML : Panduan Tutorial Lengkap Dari Dasar

Penulis : vikar Kategori : Belajar HTML

Belajar Html

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

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

Apa Itu HTML ?

HTML singkatan dari Hyper Text Markup Language.

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

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.

Persiapan Yang Dibutuhkan

html css

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.

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

Aplikasi Text Editor yang saya sarankan 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.

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 yang penulisannya menggunakan tag.

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>





Ini paragraf

</body>
</html>

Markup di atas di awali oleh tag <html> dan di akhiri oleh tag </html>, tag <!DOCTYPE html> memberikan informasi ke pada browser tipe versi html yang di gunakan.

Isi dari tag <head> tidak akan di tampilkan di browser, Hanya text yang berada dalam tag <title> akan muncul di tab 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.

Agar selalu update tutorial terbaru silahkan daftarkan email anda.

  1. Artikel pas Buatku yg mksh newbe

*
*

Dapatkan Tutorial Terbaru Dari WarungProgram.com

Tutorial Lainnya